images preload Der beste Weg, Bilder mit JavaScript / jQuery vorzuladen?




4 Answers

Sprinten

Wie andere bereits erwähnt haben, funktioniert das Spritting aus verschiedenen Gründen recht gut, es ist jedoch nicht so gut wie es sich herausgestellt hat.

  • Auf der anderen Seite machen Sie nur eine HTTP-Anfrage für Ihre Bilder. YMMV obwohl.
  • Auf der anderen Seite laden Sie alles in einer HTTP-Anfrage. Da die meisten aktuellen Browser auf zwei gleichzeitige Verbindungen beschränkt sind, kann die Bildanforderung andere Anfragen blockieren. Daher werden YMMV und so etwas wie Ihr Menühintergrund möglicherweise nicht angezeigt.
  • Mehrere Bilder haben die gleiche Farbpalette, so dass es einige Einsparungen gibt, aber dies ist nicht immer der Fall, und auch das ist vernachlässigbar.
  • Die Komprimierung wird verbessert, da mehr gemeinsame Daten zwischen Bildern vorhanden sind.

Der Umgang mit unregelmäßigen Formen ist jedoch schwierig. Die Kombination aller neuen Bilder in das neue ist ein weiterer Ärger.

Low-Jack-Ansatz mit <img> -Tags

Wenn Sie nach der definitiven Lösung suchen, dann sollten Sie mit dem Low-Jack-Ansatz gehen, den ich immer noch bevorzuge. Erstellen Sie <img> Links zu den Bildern am Ende Ihres Dokuments und setzen Sie die width und height auf 1x1 Pixel und legen Sie sie zusätzlich in ein verstecktes div. Wenn sie sich am Ende der Seite befinden, werden sie nach anderem Inhalt geladen.

javascript preload images

Ich bin mir vollkommen bewusst, dass diese Frage überall gefragt und beantwortet wurde, sowohl in SO als auch in Abwesenheit. Es scheint jedoch jedes Mal eine andere Antwort zu geben, z. B. this , this und that .

Es ist mir egal, ob es jQuery verwendet oder nicht - was wichtig ist, ist, dass es funktioniert und cross-browser ist.]

Also, was ist der beste Weg Bilder zu laden?




Meiner Meinung nach wird die Verwendung von Multipart XMLHttpRequest, die von einigen Bibliotheken eingeführt wird, in den nächsten Jahren eine bevorzugte Lösung sein. IE <v8 unterstützt jedoch immer noch keine Daten: uri (selbst IE8 hat nur eingeschränkte Unterstützung und erlaubt bis zu 32kb). Hier ist eine Implementierung des parallelen Ladens von Bildern - http://code.google.com/p/core-framework/wiki/ImagePreloading , die im Framework gebündelt ist, aber trotzdem einen Blick wert ist.




Hier geht meine einfache Lösung mit einem Einblenden des Bildes nach dem Laden.

    function preloadImage(_imgUrl, _container){
        var image = new Image();
            image.src = _imgUrl;
            image.onload = function(){
                $(_container).fadeTo(500, 1);
            };
        }






Related