2016-12-17 4 views
1

Ich verwende eine JavaScript-Bibliothek, um einige Bilder auf der Webseite zu arrangieren. Der folgende Browser:Sollte ein Skript zuerst oder Bilder laden?

  • Firefox
  • IE 11
  • Microsoft Rand

die Seite machen, wie es geplant war, tritt das Problem mit Chrome-Browser. Es vermasselt das komplette Layout.

Die oben genannten Browser laden keine Inhalte, es sei denn, alle Bilder wurden heruntergeladen, bis dann ein leerer weißer Bildschirm angezeigt wird, und auf einmal wird der gesamte Inhalt angezeigt. Und im Falle von Chrome zeigt der Browser unterwegs Inhalte an, da Sie die Bilder in Scanline-Form sehen können.

Ich habe versucht, die Funktion aufrufen, die diese Bilder in arrangiert:

$(window).load(function() {})

und es das Problem nicht beheben, habe ich versucht, dies in der <head></head> Aufruf und auch vor nur </body> schließen, dass reparierte es auch nicht. Ist dies ein Chrome-Problem?

Was sollte der richtige Zeitpunkt sein, an dem die Funktion aufgerufen werden sollte?

+0

Hinweis: [Laden der Ressource ist nicht alles] (http://stackoverflow.com/questions/39543290/how-to-know-when-browser-finish-to-process-an-image-after-loading- es), aber es ist schon ein guter Anfang ;-) – Kaiido

Antwort

1

läuft eine schöne Bibliothek, die im Internet mit einem umfassenden Namen Es ist imagesLoaded Ihr Problem zu beheben entworfen! Es soll natürlich Cross-Browser funktionieren, also keine Unterschiede im Verhalten in Chrome oder anderen Browsern.

Mit seiner Hilfe können Sie Ihren Code in dem Moment ausführen, wenn alle Bilder geladen in bestimmten DOM-Element oder Elemente von jQuery Selektor gesteuert werden. Wie:

$('body').imagesLoaded(function() { 
    // images have loaded 
}); 

Es gibt auch .done, .fail, .progress Rückrufe unterstützt, wenn Sie benötigen, um die Dokumentation überprüfen.

+0

Diese Bibliothek hat für mich funktioniert! –

0

Bilder laden Zuerst als verstecktes sollen, dann sollte Ihr Skript wie

$(document).ready(function(){ 

// here do the scripting may be showing them one by one 

}); 
+0

Wie im Display: keine? –

1

In einigen Fällen müssen Sie warten, bis das Bild geladen wird, um einen Parameter zu erhalten, der nicht im -Tag angegeben ist, z. B. Höhe. Dann können Sie verwenden $(window).load

In anderen Fällen, zum Beispiel, einige Klassen zu den Bildern hinzufügen, können Sie es vor dem Bild laden.

Wenn Sie die Bilder laden möchten, nachdem die Seite vollständig geladen wurde oder wenn der Benutzer wirklich scrollt und jedes Bild sieht, ist Lazy Load ein gutes Plugin und unterstützt Callbacks.

Verwandte Themen