Wie kann ich verhindern net :: ERR_INSUFICIENT_RESOURCES Fehler verursacht durch ng-repeat?

Ja, ich habe ein Performance-Problem, ng-repeat ist zu schnell!Wie kann ich verhindern net :: ERR_INSUFICIENT_RESOURCES Fehler verursacht durch ng-repeat?

Ich benutze Winkel mit Elektron und ich lade img Tags (Thumbnails ~ 10kb) innerhalb einer ng-repeat. Wenn ich über ~ 600 von ihnen habe, bekomme ich net::ERR_INSUFFICIENT_RESOURCES Fehler von WebKit:

<div ng-repeat="photo in photoImport.data"> 
    <img ng-src="{{photo.thumbnail}}" alt=""> 
</div>

Wie kann ich am besten langsam ng-repeat nach unten (oder auf andere Weise verhindert) Netzwerkfehler auf Grund zu vielen Anfragen?

Beachten Sie außerdem, dass das beabsichtigte Verhalten ist, dass alle Fotos in der Liste so schnell wie möglich laden - der Benutzer sollte so schnell wie möglich zur letzten Miniaturansicht in der Liste springen können.

Quelle

2016-05-10 Dan

Eine Antwort ist die limitTo Filter mit einem Intervall kombiniert zu verwenden:

<div ng-repeat="photo in photoImport.data | limitTo : ngRepeatLimit>

mit folgendem in der Steuerung:

function ngRepeatAllSlowly(photoImport) { 
    let incr = 400, 
     cycleCount = Math.ceil(photoImport.length/incr), 
     stop; 

     // Set initial limit 
     $scope.ngRepeatLimit = 20; 

     // Then reguarly increase it. 
     stop = $interval(incrementLimit, incr, cycleCount, true).then(function(){ 
     $interval.cancel(stop); 
     }); 

     // Increase ngRepeatLimit 
     function incrementLimit() { 
     $scope.ngRepeatLimit += incr; 
     } 
    } 

    ngRepeatAllSlowly($scope.photoImport)

Quelle

2016-05-10 04:44:37 Dan

Ich würde unter Verwendung verzögertes Laden Ansatz, so etwas wie Code vorschlagen . So dass Bilder nur erhalten, wenn Benutzer scrollt sie geladen:

<!doctype html> 
 
<html ng-app="Demo" ng-controller="AppController"> 
 
<head> 
 
\t <meta charset="utf-8" /> 
 

 
\t <title> 
 
\t \t Lazy Loading Images With AngularJS 
 
\t </title> 
 

 
\t <style type="text/css"> 
 

 
\t \t /* Add "click" styles because newer releases of AngularJS don't seem to add the HREF value. */ 
 
\t \t a[ ng-click ] { 
 
\t \t \t cursor: pointer ; 
 
\t \t \t text-decoration: underline ; 
 
\t \t } 
 

 
\t \t a.box { 
 
\t \t \t background-color: #FAFAFA ; 
 
\t \t \t border: 1px solid #CCCCCC ; 
 
\t \t \t display: block ; 
 
\t \t \t height: 200px ; 
 
\t \t \t line-height: 200px ; 
 
\t \t \t text-align: center ; 
 
\t \t \t width: 684px ; 
 
\t \t } 
 

 
\t \t ul.photos { 
 
\t \t \t list-style-type: none ; 
 
\t \t \t margin: 16px 0px 16px 0px ; 
 
\t \t \t padding: 0px 0px 0px 0px ; 
 
\t \t \t width: 700px ; 
 
\t \t } 
 

 
\t \t ul.photos:after { 
 
\t \t \t content: "" ; 
 
\t \t \t clear: both ; 
 
\t \t \t display: block ; 
 
\t \t \t height: 0px ; 
 
\t \t } 
 

 
\t \t li.photo { 
 
\t \t \t background-color: #FAFAFA ; 
 
\t \t \t border: 1px solid #CCCCCC ; 
 
\t \t \t border-radius: 4px 4px 4px 4px ; 
 
\t \t \t float: left ; 
 
\t \t \t margin: 0px 10px 10px 0px ; 
 
\t \t \t padding: 5px 5px 5px 5px ; 
 
\t \t } 
 

 
\t \t li.photo img { 
 
\t \t \t border: 1px solid #EEEEEE ; 
 
\t \t \t border-radius: 3px 3px 3px 3px ; 
 
\t \t \t display: block ; 
 
\t \t } 
 

 
\t \t img[ bn-lazy-src ] { 
 
\t \t \t background-image: url("./checkered.png") ; 
 
\t \t } 
 

 
\t </style> 
 
</head> 
 
<body> 
 

 
\t <h1> 
 
\t \t Lazy Loading Images With AngularJS 
 
\t </h1> 
 

 
\t <p> 
 
\t \t You have {{ photos.size }} photos in your set. 
 

 
\t \t <a ng-click="rebuildSet()">Rebuild set</a>. 
 
\t \t <a ng-click="changeSource()">Change src</a>. 
 
\t \t <a ng-click="clearPhotos()">Clear</a>. 
 
\t </p> 
 

 
\t <a ng-show="isBoxVisible" ng-click="hideBox()" class="box"> 
 
\t \t This is a big thing that may change, 
 
\t \t causing the DOCUMENT HEIGHT to change. 
 
\t </a> 
 

 
\t <ul class="photos"> 
 

 
\t \t <li ng-repeat="photo in photos" class="photo"> 
 

 
\t \t \t <img 
 
\t \t \t \t bn-lazy-src="{{ photo.src }}" 
 
\t \t \t \t width="150" 
 
\t \t \t \t height="150" 
 
\t \t \t \t alt="Christina Cox" 
 
\t \t \t \t /> 
 

 
\t \t </li> 
 

 
\t </ul> 
 

 

 

 
\t <!-- Load scripts. --> 
 
\t <script 
 
\t \t type="text/javascript" 
 
\t \t src="../../vendor/jquery/jquery-2.0.3.min.js"> 
 
\t </script> 
 
\t <script 
 
\t \t type="text/javascript" 
 
\t \t src="../../vendor/angularjs/angular-1.0.7.min.js"> 
 
\t </script> 
 
\t <script type="text/javascript"> 
 

 

 
\t \t // Create an application module for our demo. 
 
\t \t var app = angular.module("Demo", []); 
 

 

 
\t \t // -------------------------------------------------- // 
 
\t \t // -------------------------------------------------- // 
 

 

 
\t \t // I control the root of the application. 
 
\t \t app.controller(
 
\t \t \t "AppController", 
 
\t \t \t function($scope) { 
 

 
\t \t \t \t // I flag the visibility of the big box. 
 
\t \t \t \t $scope.isBoxVisible = true; 
 

 
\t \t \t \t // Build up a large set of images, all with unique 
 
\t \t \t \t // SRC values so that the browser cannot cache them. 
 
\t \t \t \t $scope.photos = buildPhotoSet(200); 
 

 

 
\t \t \t \t // --- 
 
\t \t \t \t // PUBLIC METHODS. 
 
\t \t \t \t // --- 
 

 

 
\t \t \t \t // I change the SRC values of the existing photo set 
 
\t \t \t \t // in order to examine how changes to source will 
 
\t \t \t \t // affect rendered/non-rendered images. 
 
\t \t \t \t $scope.changeSource = function() { 
 

 
\t \t \t \t \t var now = (new Date()).getTime(); 
 

 
\t \t \t \t \t // Update all SRC attribute to point to "1.jpg". 
 
\t \t \t \t \t for (var i = 0 ; i < $scope.photos.length ; i++) { 
 

 
\t \t \t \t \t \t var photo = $scope.photos[ i ]; 
 

 
\t \t \t \t \t \t photo.src = photo.src.replace(/\d\./i, "1."); 
 

 
\t \t \t \t \t } 
 

 
\t \t \t \t }; 
 

 

 
\t \t \t \t // I clear the current photo set. 
 
\t \t \t \t $scope.clearPhotos = function() { 
 

 
\t \t \t \t \t $scope.photos = []; 
 

 
\t \t \t \t }; 
 

 

 
\t \t \t \t // I hide the big box, allowing the document to change 
 
\t \t \t \t // its dimensions (and possibly show more images than 
 
\t \t \t \t // were visible beforehand). 
 
\t \t \t \t $scope.hideBox = function() { 
 

 
\t \t \t \t \t $scope.isBoxVisible = false; 
 

 
\t \t \t \t }; 
 

 

 
\t \t \t \t // I rebuild the entire photo set. 
 
\t \t \t \t $scope.rebuildSet = function() { 
 

 
\t \t \t \t \t $scope.photos = buildPhotoSet(20); 
 

 
\t \t \t \t }; 
 

 

 
\t \t \t \t // --- 
 
\t \t \t \t // PRIVATE METHODS. 
 
\t \t \t \t // --- 
 

 

 
\t \t \t \t // I return a photo set of the given size. Each photo 
 
\t \t \t \t // will have a unique SRC value. 
 
\t \t \t \t function buildPhotoSet(size) { 
 

 
\t \t \t \t \t var photos = []; 
 
\t \t \t \t \t var now = (new Date()).getTime(); 
 

 
\t \t \t \t \t for (var i = 0 ; i < size ; i++) { 
 

 
\t \t \t \t \t \t var index = ((i % 3) + 1); 
 
\t \t \t \t \t \t var version = (now + i); 
 

 
\t \t \t \t \t \t photos.push({ 
 
\t \t \t \t \t \t \t id: (i + 1), 
 
\t \t \t \t \t \t \t src: ("christina-cox-" + index + ".jpg?v=" + version) 
 
\t \t \t \t \t \t }); 
 

 
\t \t \t \t \t } 
 

 
\t \t \t \t \t return(photos); 
 

 
\t \t \t \t } 
 

 
\t \t \t } 
 
\t \t); 
 

 

 
\t \t // -------------------------------------------------- // 
 
\t \t // -------------------------------------------------- // 
 

 

 
\t \t // I lazily load the images, when they come into view. 
 
\t \t app.directive(
 
\t \t \t "bnLazySrc", 
 
\t \t \t function($window, $document) { 
 

 

 
\t \t \t \t // I manage all the images that are currently being 
 
\t \t \t \t // monitored on the page for lazy loading. 
 
\t \t \t \t var lazyLoader = (function() { 
 

 
\t \t \t \t \t // I maintain a list of images that lazy-loading 
 
\t \t \t \t \t // and have yet to be rendered. 
 
\t \t \t \t \t var images = []; 
 

 
\t \t \t \t \t // I define the render timer for the lazy loading 
 
\t \t \t \t \t // images to that the DOM-querying (for offsets) 
 
\t \t \t \t \t // is chunked in groups. 
 
\t \t \t \t \t var renderTimer = null; 
 
\t \t \t \t \t var renderDelay = 100; 
 

 
\t \t \t \t \t // I cache the window element as a jQuery reference. 
 
\t \t \t \t \t var win = $($window); 
 

 
\t \t \t \t \t // I cache the document document height so that 
 
\t \t \t \t \t // we can respond to changes in the height due to 
 
\t \t \t \t \t // dynamic content. 
 
\t \t \t \t \t var doc = $document; 
 
\t \t \t \t \t var documentHeight = doc.height(); 
 
\t \t \t \t \t var documentTimer = null; 
 
\t \t \t \t \t var documentDelay = 2000; 
 

 
\t \t \t \t \t // I determine if the window dimension events 
 
\t \t \t \t \t // (ie. resize, scroll) are currenlty being 
 
\t \t \t \t \t // monitored for changes. 
 
\t \t \t \t \t var isWatchingWindow = false; 
 

 

 
\t \t \t \t \t // --- 
 
\t \t \t \t \t // PUBLIC METHODS. 
 
\t \t \t \t \t // --- 
 

 

 
\t \t \t \t \t // I start monitoring the given image for visibility 
 
\t \t \t \t \t // and then render it when necessary. 
 
\t \t \t \t \t function addImage(image) { 
 

 
\t \t \t \t \t \t images.push(image); 
 

 
\t \t \t \t \t \t if (! renderTimer) { 
 

 
\t \t \t \t \t \t \t startRenderTimer(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t if (! isWatchingWindow) { 
 

 
\t \t \t \t \t \t \t startWatchingWindow(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I remove the given image from the render queue. 
 
\t \t \t \t \t function removeImage(image) { 
 

 
\t \t \t \t \t \t // Remove the given image from the render queue. 
 
\t \t \t \t \t \t for (var i = 0 ; i < images.length ; i++) { 
 

 
\t \t \t \t \t \t \t if (images[ i ] === image) { 
 

 
\t \t \t \t \t \t \t \t images.splice(i, 1); 
 
\t \t \t \t \t \t \t \t break; 
 

 
\t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // If removing the given image has cleared the 
 
\t \t \t \t \t \t // render queue, then we can stop monitoring 
 
\t \t \t \t \t \t // the window and the image queue. 
 
\t \t \t \t \t \t if (! images.length) { 
 

 
\t \t \t \t \t \t \t clearRenderTimer(); 
 

 
\t \t \t \t \t \t \t stopWatchingWindow(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // --- 
 
\t \t \t \t \t // PRIVATE METHODS. 
 
\t \t \t \t \t // --- 
 

 

 
\t \t \t \t \t // I check the document height to see if it's changed. 
 
\t \t \t \t \t function checkDocumentHeight() { 
 

 
\t \t \t \t \t \t // If the render time is currently active, then 
 
\t \t \t \t \t \t // don't bother getting the document height - 
 
\t \t \t \t \t \t // it won't actually do anything. 
 
\t \t \t \t \t \t if (renderTimer) { 
 

 
\t \t \t \t \t \t \t return; 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t var currentDocumentHeight = doc.height(); 
 

 
\t \t \t \t \t \t // If the height has not changed, then ignore - 
 
\t \t \t \t \t \t // no more images could have come into view. 
 
\t \t \t \t \t \t if (currentDocumentHeight === documentHeight) { 
 

 
\t \t \t \t \t \t \t return; 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // Cache the new document height. 
 
\t \t \t \t \t \t documentHeight = currentDocumentHeight; 
 

 
\t \t \t \t \t \t startRenderTimer(); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I check the lazy-load images that have yet to 
 
\t \t \t \t \t // be rendered. 
 
\t \t \t \t \t function checkImages() { 
 

 
\t \t \t \t \t \t // Log here so we can see how often this 
 
\t \t \t \t \t \t // gets called during page activity. 
 
\t \t \t \t \t \t console.log("Checking for visible images..."); 
 

 
\t \t \t \t \t \t var visible = []; 
 
\t \t \t \t \t \t var hidden = []; 
 

 
\t \t \t \t \t \t // Determine the window dimensions. 
 
\t \t \t \t \t \t var windowHeight = win.height(); 
 
\t \t \t \t \t \t var scrollTop = win.scrollTop(); 
 

 
\t \t \t \t \t \t // Calculate the viewport offsets. 
 
\t \t \t \t \t \t var topFoldOffset = scrollTop; 
 
\t \t \t \t \t \t var bottomFoldOffset = (topFoldOffset + windowHeight); 
 

 
\t \t \t \t \t \t // Query the DOM for layout and seperate the 
 
\t \t \t \t \t \t // images into two different categories: those 
 
\t \t \t \t \t \t // that are now in the viewport and those that 
 
\t \t \t \t \t \t // still remain hidden. 
 
\t \t \t \t \t \t for (var i = 0 ; i < images.length ; i++) { 
 

 
\t \t \t \t \t \t \t var image = images[ i ]; 
 

 
\t \t \t \t \t \t \t if (image.isVisible(topFoldOffset, bottomFoldOffset)) { 
 

 
\t \t \t \t \t \t \t \t visible.push(image); 
 

 
\t \t \t \t \t \t \t } else { 
 

 
\t \t \t \t \t \t \t \t hidden.push(image); 
 

 
\t \t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // Update the DOM with new image source values. 
 
\t \t \t \t \t \t for (var i = 0 ; i < visible.length ; i++) { 
 

 
\t \t \t \t \t \t \t visible[ i ].render(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // Keep the still-hidden images as the new 
 
\t \t \t \t \t \t // image queue to be monitored. 
 
\t \t \t \t \t \t images = hidden; 
 

 
\t \t \t \t \t \t // Clear the render timer so that it can be set 
 
\t \t \t \t \t \t // again in response to window changes. 
 
\t \t \t \t \t \t clearRenderTimer(); 
 

 
\t \t \t \t \t \t // If we've rendered all the images, then stop 
 
\t \t \t \t \t \t // monitoring the window for changes. 
 
\t \t \t \t \t \t if (! images.length) { 
 

 
\t \t \t \t \t \t \t stopWatchingWindow(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I clear the render timer so that we can easily 
 
\t \t \t \t \t // check to see if the timer is running. 
 
\t \t \t \t \t function clearRenderTimer() { 
 

 
\t \t \t \t \t \t clearTimeout(renderTimer); 
 

 
\t \t \t \t \t \t renderTimer = null; 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I start the render time, allowing more images to 
 
\t \t \t \t \t // be added to the images queue before the render 
 
\t \t \t \t \t // action is executed. 
 
\t \t \t \t \t function startRenderTimer() { 
 

 
\t \t \t \t \t \t renderTimer = setTimeout(checkImages, renderDelay); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I start watching the window for changes in dimension. 
 
\t \t \t \t \t function startWatchingWindow() { 
 

 
\t \t \t \t \t \t isWatchingWindow = true; 
 

 
\t \t \t \t \t \t // Listen for window changes. 
 
\t \t \t \t \t \t win.on("resize.bnLazySrc", windowChanged); 
 
\t \t \t \t \t \t win.on("scroll.bnLazySrc", windowChanged); 
 

 
\t \t \t \t \t \t // Set up a timer to watch for document-height changes. 
 
\t \t \t \t \t \t documentTimer = setInterval(checkDocumentHeight, documentDelay); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I stop watching the window for changes in dimension. 
 
\t \t \t \t \t function stopWatchingWindow() { 
 

 
\t \t \t \t \t \t isWatchingWindow = false; 
 

 
\t \t \t \t \t \t // Stop watching for window changes. 
 
\t \t \t \t \t \t win.off("resize.bnLazySrc"); 
 
\t \t \t \t \t \t win.off("scroll.bnLazySrc"); 
 

 
\t \t \t \t \t \t // Stop watching for document changes. 
 
\t \t \t \t \t \t clearInterval(documentTimer); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I start the render time if the window changes. 
 
\t \t \t \t \t function windowChanged() { 
 

 
\t \t \t \t \t \t if (! renderTimer) { 
 

 
\t \t \t \t \t \t \t startRenderTimer(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // Return the public API. 
 
\t \t \t \t \t return({ 
 
\t \t \t \t \t \t addImage: addImage, 
 
\t \t \t \t \t \t removeImage: removeImage 
 
\t \t \t \t \t }); 
 

 
\t \t \t \t })(); 
 

 

 
\t \t \t \t // ------------------------------------------ // 
 
\t \t \t \t // ------------------------------------------ // 
 

 

 
\t \t \t \t // I represent a single lazy-load image. 
 
\t \t \t \t function LazyImage(element) { 
 

 
\t \t \t \t \t // I am the interpolated LAZY SRC attribute of 
 
\t \t \t \t \t // the image as reported by AngularJS. 
 
\t \t \t \t \t var source = null; 
 

 
\t \t \t \t \t // I determine if the image has already been 
 
\t \t \t \t \t // rendered (ie, that it has been exposed to the 
 
\t \t \t \t \t // viewport and the source had been loaded). 
 
\t \t \t \t \t var isRendered = false; 
 

 
\t \t \t \t \t // I am the cached height of the element. We are 
 
\t \t \t \t \t // going to assume that the image doesn't change 
 
\t \t \t \t \t // height over time. 
 
\t \t \t \t \t var height = null; 
 

 

 
\t \t \t \t \t // --- 
 
\t \t \t \t \t // PUBLIC METHODS. 
 
\t \t \t \t \t // --- 
 

 

 
\t \t \t \t \t // I determine if the element is above the given 
 
\t \t \t \t \t // fold of the page. 
 
\t \t \t \t \t function isVisible(topFoldOffset, bottomFoldOffset) { 
 

 
\t \t \t \t \t \t // If the element is not visible because it 
 
\t \t \t \t \t \t // is hidden, don't bother testing it. 
 
\t \t \t \t \t \t if (! element.is(":visible")) { 
 

 
\t \t \t \t \t \t \t return(false); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // If the height has not yet been calculated, 
 
\t \t \t \t \t \t // the cache it for the duration of the page. 
 
\t \t \t \t \t \t if (height === null) { 
 

 
\t \t \t \t \t \t \t height = element.height(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t \t // Update the dimensions of the element. 
 
\t \t \t \t \t \t var top = element.offset().top; 
 
\t \t \t \t \t \t var bottom = (top + height); 
 

 
\t \t \t \t \t \t // Return true if the element is: 
 
\t \t \t \t \t \t // 1. The top offset is in view. 
 
\t \t \t \t \t \t // 2. The bottom offset is in view. 
 
\t \t \t \t \t \t // 3. The element is overlapping the viewport. 
 
\t \t \t \t \t \t return(
 
\t \t \t \t \t \t \t \t (
 
\t \t \t \t \t \t \t \t \t (top <= bottomFoldOffset) && 
 
\t \t \t \t \t \t \t \t \t (top >= topFoldOffset) 
 
\t \t \t \t \t \t \t \t) 
 
\t \t \t \t \t \t \t || 
 
\t \t \t \t \t \t \t \t (
 
\t \t \t \t \t \t \t \t \t (bottom <= bottomFoldOffset) && 
 
\t \t \t \t \t \t \t \t \t (bottom >= topFoldOffset) 
 
\t \t \t \t \t \t \t \t) 
 
\t \t \t \t \t \t \t || 
 
\t \t \t \t \t \t \t \t (
 
\t \t \t \t \t \t \t \t \t (top <= topFoldOffset) && 
 
\t \t \t \t \t \t \t \t \t (bottom >= bottomFoldOffset) 
 
\t \t \t \t \t \t \t \t) 
 
\t \t \t \t \t \t); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I move the cached source into the live source. 
 
\t \t \t \t \t function render() { 
 

 
\t \t \t \t \t \t isRendered = true; 
 

 
\t \t \t \t \t \t renderSource(); 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // I set the interpolated source value reported 
 
\t \t \t \t \t // by the directive/AngularJS. 
 
\t \t \t \t \t function setSource(newSource) { 
 

 
\t \t \t \t \t \t source = newSource; 
 

 
\t \t \t \t \t \t if (isRendered) { 
 

 
\t \t \t \t \t \t \t renderSource(); 
 

 
\t \t \t \t \t \t } 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // --- 
 
\t \t \t \t \t // PRIVATE METHODS. 
 
\t \t \t \t \t // --- 
 

 

 
\t \t \t \t \t // I load the lazy source value into the actual 
 
\t \t \t \t \t // source value of the image element. 
 
\t \t \t \t \t function renderSource() { 
 

 
\t \t \t \t \t \t element[ 0 ].src = source; 
 

 
\t \t \t \t \t } 
 

 

 
\t \t \t \t \t // Return the public API. 
 
\t \t \t \t \t return({ 
 
\t \t \t \t \t \t isVisible: isVisible, 
 
\t \t \t \t \t \t render: render, 
 
\t \t \t \t \t \t setSource: setSource 
 
\t \t \t \t \t }); 
 

 
\t \t \t \t } 
 

 

 
\t \t \t \t // ------------------------------------------ // 
 
\t \t \t \t // ------------------------------------------ // 
 

 

 
\t \t \t \t // I bind the UI events to the scope. 
 
\t \t \t \t function link($scope, element, attributes) { 
 

 
\t \t \t \t \t var lazyImage = new LazyImage(element); 
 

 
\t \t \t \t \t // Start watching the image for changes in its 
 
\t \t \t \t \t // visibility. 
 
\t \t \t \t \t lazyLoader.addImage(lazyImage); 
 

 

 
\t \t \t \t \t // Since the lazy-src will likely need some sort 
 
\t \t \t \t \t // of string interpolation, we don't want to 
 
\t \t \t \t \t attributes.$observe(
 
\t \t \t \t \t \t "bnLazySrc", 
 
\t \t \t \t \t \t function(newSource) { 
 

 
\t \t \t \t \t \t \t lazyImage.setSource(newSource); 
 

 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 

 

 
\t \t \t \t \t // When the scope is destroyed, we need to remove 
 
\t \t \t \t \t // the image from the render queue. 
 
\t \t \t \t \t $scope.$on(
 
\t \t \t \t \t \t "$destroy", 
 
\t \t \t \t \t \t function() { 
 

 
\t \t \t \t \t \t \t lazyLoader.removeImage(lazyImage); 
 

 
\t \t \t \t \t \t } 
 
\t \t \t \t \t); 
 

 
\t \t \t \t } 
 

 

 
\t \t \t \t // Return the directive configuration. 
 
\t \t \t \t return({ 
 
\t \t \t \t \t link: link, 
 
\t \t \t \t \t restrict: "A" 
 
\t \t \t \t }); 
 

 
\t \t \t } 
 
\t \t); 
 

 
\t </script> 
 

 
</body> 
 
</html>

Referenz: GithubUserContent

Quelle

2016-05-10 05:06:31 akazemis

Vielen Dank für die Zeit nehmen, und großer Vorschlag, es war meine Schuld, dass ich nicht beinhalten die Anforderung, dass alle Fotos immer noch so schnell wie möglich geladen werden. – Dan

Wie kann ich verhindern net :: ERR_INSUFICIENT_RESOURCES Fehler verursacht durch ng-repeat?

Antwort

Verwandte Themen