Laden von 1000 Bildern auf einer Seite

Question

Dies ist kein Duplikat, ich habe bereits die anderen Fragen zum Laden von über 1.000 Bildern auf einer Seite gelesen und die Vorschläge übernommen. Diese Frage bezieht sich mehr auf den Umgang mit den über 1.000 Bildern.

Ich habe die Lazy Loading angewendet und die Größe der Fotos auf jeweils 500k reduziert. Auch im Lazy Loading im mit einem 1px Daten-URI, um die Anfragen so leicht wie möglich zu machen.

Allerdings kann man kaum nach unten scrollen, es ist sehr lückig und es fühlt sich an wie auf einem Windows XP SP2 versucht COD zu spielen.

Im PHP-Snippet ich dir bin scannen und alle Bilder bekommen und mit ihnen ein Feld zurückgibt:

function returnPhotos($path){ 
    $files = scandir($path); 
    $files = array_diff(scandir($path), array('video', '.', '..')); 
    $filesInArray = count($files); 
    return $files; 
} 

Here I Schleife durch das Array und zeigen die Bilder

<div class="col-md-12" style="text-align:center;"> 
<?php 
    foreach($photoArray as $photo){ 
    echo " 
     <div style='display:inline-block;position:relative;'> 
     <label for='img".$counter."'> 
     <img src='data: 
image/gif;base64,R0lGODdhAQABAPAAAMPDwwAAACwAAAAAAQABAAACAkQBADs=' data-src='".$path."".$photo."' style='max-height:250px;padding:2px;max-width:370px;min-width:184px;'> 
     </label><br/> 
    "; 
?> 
</div> 

Und hier ist die jquery verzögertes Laden-Bibliothek, die ich

/** 
* jQuery Unveil 
* A very lightweight jQuery plugin to lazy load images 
* http://luis-almeida.github.com/unveil 
* 
* Licensed under the MIT license. 
* Copyright 2013 Luís Almeida 
* https://github.com/luis-almeida 
*/ 

;(function($) { 

    $.fn.unveil = function(threshold, callback) { 

    var $w = $(window), 
     th = threshold || 0, 
     retina = window.devicePixelRatio > 1, 
     attrib = retina? "data-src-retina" : "data-src", 
     images = this, 
     loaded; 

    this.one("unveil", function() { 
     var source = this.getAttribute(attrib); 
     source = source || this.getAttribute("data-src"); 
     if (source) { 
     this.setAttribute("src", source); 
     if (typeof callback === "function") callback.call(this); 
     } 
    }); 

    function unveil() { 
     var inview = images.filter(function() { 
     var $e = $(this); 
     if ($e.is(":hidden")) return; 

     var wt = $w.scrollTop(), 
      wb = wt + $w.height(), 
      et = $e.offset().top, 
      eb = et + $e.height(); 

     return eb >= wt - th && et <= wb + th; 
     }); 

     loaded = inview.trigger("unveil"); 
     images = images.not(loaded); 
    } 

    $w.on("scroll.unveil resize.unveil lookup.unveil", unveil); 

    unveil(); 

    return this; 

    }; 

})(window.jQuery || window.Zepto); 

ich eine Website gefunden bin mit wo es macht die gleichen, aber es funktioniert ziemlich gut, hier: https://www.youtube.com/watch?v=c0c7aUh33ug

aber ich arbeitet schrecklich, hier: https://www.youtube.com/watch?v=jRuwzAzaShU

Was kann ich ändern, um besser zu machen, laden/Arbeit?

Answer 1

Es hängt auch von der Server-Reaktionsgeschwindigkeit und der Bildgröße ab. Haben Sie diese beiden Faktoren berücksichtigt, um den Unterschied zu erklären?

Haben Sie das Rad auch neu erfunden? Lazy-loading.js existiert bereits. Warum versuchen Sie nicht die Bibliothek

Answer 2

Wie Sebastián Espinosa es ausdrückte, ist das größte Problem, dass für jedes Bild das DOM geändert wird. Ich habe damit angefangen und gegoogelt und herausgefunden, dass, wenn Sie die genaue Höhe und Breite des IMG-Elements für jedes Bild einstellen, sie kein Problem haben werden, sogar 5-7000 Bilder auf einer Seite zu laden und wenn Sie lazy loading hinzufügen das funktioniert ziemlich gut.

Jetzt muss ich natürlich feststellen, welche Fotos sind Landschaft und welche sind Portrait, bevor sie angezeigt werden, so dass ich sie mit richtigen scalling anzeigen kann, aber anders als das, denke ich, es ist in Ordnung.

Daher kann diese Frage geschlossen werden

Answer 3

einige Ratschläge für Sie:

1. Ihre Bilder komprimieren (passt Ihre Anwendungen so min wie möglich)
2. Bild Vorbelastung neben Strom Fensterbilder (möglicherweise können Sie das Bild außerhalb der Fenster vorladen, wenn es angezeigt werden muss, bevor Sie es an die richtige Position verschieben)
3. Entfernen Sie das älteste Element, um Speicher freizugeben (entfernt Elemente, die nicht vorhanden sind vor kurzem verwendet wird), so dass Sie Browser schneller zu halten und leichter

einige Worte:

Englisch ist nicht meine Muttersprache, wenn einige Wörter, die Sie nicht verstehen. Bitte folgen Sie mir ein paar Worte