Jquery Lazy Loading funktioniert nicht richtig

Ich versuche zu implementieren ist ein jQuery-Technik, die sogenannte lazy loading . Das Ziel, das ich versuche zu erreichen ist, ich will die Seite zu laden, ohne zu warten, für all die Bilder, die Anfrage so , ich will die Seite zuerst geladen, CSS, etc., und lassen Sie die Bilder langsam laden.

Das Problem, das ich bin vor ist hier, er wartet, bis alle Bild-Anfragen, bevor die Seite geladen wird, ist das Gegenteil von dem Konzept der lazy loading. Kann mir jemand helfen?

<html>
    <head>
        <link rel="stylesheet" href="css/float.css">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
        <script src="https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.min.js" type="text/javascript"></script>
        <script>
            <script type="text/javascript">
                jQuery(document).ready(function($) {
                    $(function(){
                        $("img.lazy").lazyload();
                    });
                });
            </script>
    </head>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8349/8225268620_4e00a8f603_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8338/8224516167_bc7a5f6699_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8199/8219175940_effa3f66ca_m.jpg" width="400" height ="400"/>
<br>
<img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://farm9.staticflickr.com/8490/8215600456_de252d155d_m.jpg" width="400" height ="400"/>
<br>
InformationsquelleAutor JackRoster | 2013-06-01
  1. 10

    Du bist nicht mit dem plugin richtig. Lesen Sie die Dokumentation, man soll die URL des Bildes in die data-original Attribut. Die src - Attribut enthalten sollte, die URL einer dummy-Bild für alle Elemente, bis Sie geladen werden, das Reale Bild.

    <img class="lazy" src="http://wannabeyummymummie.files.wordpress.com/grey.jpg" data-orig="http://wannabeyummymummie.files.wordpress.com/2013/01/beach.jpg?w=300&h=187" width="400" height ="400"/>

    Ist auch, wie die anderen Antworten hingewiesen, müssen Sie rufen Sie das plugin aus der document-ready-handler.

    jQuery(document).ready(function ($) {
    $("img.lazy").lazyload(
        { data_attribute: "orig" 
        });
});

    Den data_attribute option sagt dem plugin, was data-XXX Attribut zu finden, die wirkliche URL. Es wird standardmäßig auf data-original, die oben genannten option änderungen, die es zu data-orig entsprechend der Irrt HTML, die ich Euch gab.

    FIDDLE

    • +1 das ist das richtige...
    • Sie haben die gleiche URL in src und data-original, nicht wahr? Das ist falsch.
    • Alle Bilder auf das gleiche src, was sollte ein einfaches Bild als Platzhalter verwendet. Dies ermöglicht es Ihnen, schnell zu laden, da es zwischengespeicherten ersten mal.
    • okay , ich ersetzt alle . Können Sie nehmen Sie nur einen Blick auf den geänderten code oben . Das problem ist jetzt , Es wird nicht geladen, was bei allen nur das dummy-Bild
    • danke für Eure Hilfe .
    • Versuchen Sie das plugin und laden Sie es von dort. Ich bekam eine Fehlermeldung, wenn ich versuchte auf es von github in ein Turnschuh.
    • Siehe die änderung, die ich oben gepostet. Entweder fügen Sie die option, um die lazyload nennen, oder ändern Sie alle Ihre Bilder zu verwenden data-original statt data-orig.
    • Sollten Sie auch ein echtes image-Datei für die src Attribut, nicht ein fehlerhaftes Bild.
    • danke barmar für Eure Hilfe

    InformationsquelleAutor Barmar
  2. 2

    Wickeln Sie Ihr Skript im onload-Funktion, so dass es nicht ausgeführt, bis die Seite geladen ist. 

    $(function() {
    $("img.lazy").lazyload();
});
    InformationsquelleAutor Fallexe
  3. 1

    Platzieren Sie Ihr Skript unter Dokument.bereit. SO, dass Ihre $("img.lazy") ausgeführt wird, nachdem das Dokument geladen ist, und nur, wenn die image-tags sind verfügbar in den DOM.

    $(function(){
   $("img.lazy").lazyload();
});

    einfachsten finden Sie dies heraus, ist ein Ort, ein alert oder console.nur melden, bevor $("img.lazy").lazyload(); ich.e

    <script>
console.log($("img.lazy").length); //this will log 0
 $("img.lazy").lazyload();
 </script>
    • PSL meinst du wie diese <script> $(document).ready(function() { $(function(){ $("img.faul").lazyload(); }) }); </script>
    InformationsquelleAutor PSL
Schreibe einen Kommentar