Lazy Load Funktion gebrochen

Question

Ich habe diese Lazy Loading-Funktion. Bei der Ausführung lädt es zuerst eine kleine Version des Bildes und lädt später die Vollversion. Ich brauchte das, um dem Benutzer eine funktionierende Diashow zu geben, bevor er mit dem Laden der wirklich großen Bilder begann.

Alles gearbeitet, bevor ich in der letzten if-Anweisung hinzugefügt:

if (!$(this).hasClass('lazyLoaded')) 

und die Mutationen der Klasse nach jedem Bild Laden:

$(this).addClass('lazyLoaded'); 

ich überprüfen möchten, ob die Bilder gewesen vorher geladen. Ich brauche das, denn sonst würde das Skript bei einer nächsten Ausführung die Bilder in voller Größe durch die kleineren Bilder ersetzen und später die großen Bilder neu laden.

Wenn ich diese zusätzliche if-Anweisung und die 2 .addClass-Operationen hinzufügen, funktioniert das Skript nicht mehr. Ich habe keine Ahnung warum, kannst du mir helfen?

Ein komischer Nebeneffekt, den ich auch bemerkte, ist das Zählen der Bildlänge war 1 zu hoch.

html:

<img src="img/3x2.gif" data-src="img/photo/event.jpg" alt="" /> 
<img src="img/3x2.gif" data-src="img/photo/wedding.jpg" alt="" /> 
<img src="img/3x2.gif" data-src="img/photo/portrait.jpg" alt="" /> 

jQuery:

 $.fn.lazyLoad = function(){ 
     if($(this).is('img[data-src]')) { 
      var lazy = $(this); 
     } else { 
      var lazy = $(this).find('img[data-src]'); 
     }; 
     var lazyLength = $(lazy).length; 
     console.log('lazyLength = ' + lazyLength); 
     var lazyNumber = 0 
     $(lazy).each(function(){ 
      if (!$(this).hasClass('lazyLoaded')) { 
       if (loadTime > 300) { 
        var src = $(this).data('src'); 
        var srcPath = src.slice(0, -4); 
        var srcExt = src.slice(-4); 
        var srcNew = srcPath + '_s' + srcExt; 
        $(this).one('load', function(){ 
         lazyNumber++; 
         console.log('lazyNumber = ' + lazyNumber);      
         if (lazyNumber >= lazyLength) { 
          console.log('all small images have been loaded'); 
          console.log('setting Timeout for 500ms'); 
          setTimeout(function() { 
           console.log('beginning loading of large images...'); 
           $(lazy).each(function(){ 
            $(this).one('load', function(){ 
             console.log('large images loaded'); 
             $(this).addClass('lazyLoaded'); 
            }).attr('src', $(this).data('src')); 
           }); 
          }, 500); 
         }; 
        }).attr('src', srcNew); 
        console.log('small image loaded'); 
       } else { 
        $(this).one('load', function(){ 
         $(this).addClass('lazyLoaded'); 
         console.log('large images loaded immediately'); 
        }).attr('src', $(this).data('src')); 
       }; 
      }; 
     }); 
    }; 

Answer 1

Ich denke, der Fehler, indem Sie die if-Anweisung innerhalb der Schleife .each erstellt wurde. Wenn ich darüber nachdachte, war es auch nicht der effizienteste Weg.

Ich muß nur noch die Bilder testen für beide ein Daten src Attribut und nicht schon so geladen (die Klasse mit ‚.lazyLoaded‘, bevor sie an die var faul Array übergeben.

Also noch fügt ich den Klasse ‚.lazyLoaded‘ auf Last des großen Bildes

$(this).one('load', function(){ 
    console.log('large images loaded'); 
    $(this).addClass('lazyLoaded'); 
}).attr('src', $(this).data('src')); 

Und am Anfang der Funktion hinzugefügt I .not ('lazyLoaded')

if($(this).is('img[data-src]')) { 
    var lazy = $(this).not('.lazyLoaded'); 
} else { 
    var lazy = $(this).find('img[data-src]').not('.lazyLoaded'); 
}; 

einfach den gesamten Arbeits Code veröffentlichen, vielleicht ist es von Nutzen jemand mit einem ähnlichen Problem:

$.fn.lazyLoad = function(){ 
    if($(this).is('img[data-src]')) { 
     var lazy = $(this).not('.lazyLoaded'); 
    } else { 
     var lazy = $(this).find('img[data-src]').not('.lazyLoaded'); 
    }; 
    var lazyLength = $(lazy).length; 
    console.log('lazyLength = ' + lazyLength); 
    var lazyNumber = 0 
    console.log('lazyNumber = ' + lazyNumber); 
    $(lazy).each(function(){ 
      if (loadTime > 300) { 
       var src = $(this).data('src'); 
       var srcPath = src.slice(0, -4); 
       var srcExt = src.slice(-4); 
       var srcNew = srcPath + '_s' + srcExt; 
       $(this).one('load', function(){ 
        lazyNumber++; 
        console.log('lazyNumber = ' + lazyNumber);      
        if (lazyNumber >= lazyLength) { 
         console.log('all small images have been loaded'); 
         console.log('setting Timeout for 500ms'); 
         setTimeout(function() { 
          console.log('beginning loading of large imags...'); 
          $(lazy).each(function(){ 
           $(this).one('load', function(){ 
            console.log('large images loaded'); 
            $(this).addClass('lazyLoaded'); 
           }).attr('src', $(this).data('src')); 
          }); 
         }, 500); 
        }; 
       }).attr('src', srcNew); 
       console.log('small image loaded'); 
      } else { 
       $(this).one('load', function(){ 
        console.log('large images loaded immediately'); 
        $(this).addClass('lazyLoaded'); 
       }).attr('src', $(this).data('src')); 
      }; 
    }); 
}; 
$('.lazy').lazyLoad();