Wie erkennen wir das Laden von Bildern auf unserer Webseite?

Ich möchte Bilder in einen Festzelt-Lauftext einfügen. Da die Laufschrift-Textfunktion die Länge der Elemente (Text und Bilder), die sie scrollt, erkennen muss, bevor sie mit dem Scrollen beginnt. Dies kann nur durchgeführt werden, wenn das Bild auf die Seite geladen wurde, was einige Zeit dauern wird, da mein Bild von einem Server stammt. Also muss ich wissen, wann das Bild fertig geladen wurde, damit ich mit dem Scrollen beginnen kann.Wie erkennen wir das Laden von Bildern auf unserer Webseite?

Unten ist das Image-Ende-Ladeerkennung JavaScript, das ich jetzt verwende. Ich verwende socket.io die Bilder Info zu erhalten:

var images_expected = 0; 
    socket.on('res-displaySetting', function(display){ 
     images_expected = display.runningText.length; 
     $('.marquee').marquee('destroy'); 
     var html = ""; 
     for(var k=0; k < display.runningText.length; k++) 
     { 
      if ((display.runningText[k].image == "") && (display.runningText[k].message == "")) 
      { 
       images_expected--; 
       continue; 
      } 
      else if (display.runningText[k].image == "") 
      { 
       html += display.runningText[k].message; 
       images_expected--; 
      } 
      else if (display.runningText[k].message == "") 
       html += " <img src='" + serverIP + "/img/" + display.runningText[k].image + "'> "; 
      else 
       html += " <img src='" + serverIP + "/img/" + display.runningText[k].image + "'> " + display.runningText[k].message; 
     } 
     $('.marquee').html(html); 

     if (html != "") initMarquee(); 
    }); 

    function initMarquee() { 
    interval = window.setInterval(checkImagesLoaded, 1000); 
    } 

    function checkImagesLoaded() {console.log("checking"); 
     if ($('.marquee img').length === images_expected) { 
      clearInterval(interval); 
      setTimeout(startMarquee); 
     } 
    } 

    function startMarquee() { 
    $('.marquee').marquee({duration: 8000}); 
    }

Es gibt eine checkImageLoad ist() Funktion zu überprüfen, ob das Bild geladen worden war. Es wird für 1 Sekunde überprüft. Danach beginnt der Laufschrift-Lauftext. Manchmal wird das Bild geladen, aber manchmal wird das Bild nicht geladen, sondern nur ein leeres Rechteck angezeigt.

Ich versuche, die Prüfzeit auf 5 Sekunden oder 10 Sekunden zu erhöhen, auch keine Verwendung. Manchmal wird es einfach nicht geladen. Ich denke, dass es die quadratische leere Box als das bereits geladene Bild betrachtet.

Was denkst du? Gibt es eine bessere Möglichkeit, das Laden des Bildes zu erkennen?

Quelle

2016-08-26 Coolguy

$ ("img"). Bind ('load', function() { // mach Sachen }); –

Ich kann dir nicht helfen, aber wenn du es nicht herausfinden kannst, sieh dir Desandro's imageLoaded an, auf die ich mich stark stütze http://imagesloaded.desandro.com/ –

Uthistran S, gilt deine Antwort für mehrere Bilder oder nur eins Bild? – Coolguy

Werfen Sie einen Blick auf die Funktion .load() jquery.

https://api.jquery.com/load-event/

Wenn Sie

$("img").load(function() { 
    // Handler for .load() called. 
});

verwenden Es wird ausgeführt, wenn der img fertig geladen ist.

Quelle

2016-08-26 07:07:15

Wie erkennen wir das Laden von Bildern auf unserer Webseite?

Antwort

Verwandte Themen