Ist es möglich, javascript ausführen, bevor Sie Bilder beginnt das laden?

Möchte ich ändern Sie das src-Attribut von Bildern, bevor Sie von dem browser angefordert, mit dem Ziel, reduzieren Sie die Größe der Bilder über ein PHP-Skript Timthumb. Mithilfe von jQuery, ich dachte $(document).ready würde den trick tun:

$(document).ready(function () {
  var imgs = $('#container img');
  jQuery.each(imgs, function() {
    $(this).replaceWith('<img src="timthumb/timthumb.php?src=' + $(this).attr('src') + '&w=200" />');
    });
});

Aber das original, unresized Bild ist immer noch im hintergrund heruntergeladen, um den browser-cache. Ist es möglich, das zu tun, was ich versuche zu tun, auf der client-Seite oder server-Seite-die einzige option?

Warum nicht ändern Sie einfach die src in das Skript erzeugt, dass Sie statt?

InformationsquelleAutor Toutouwai | 2011-11-08

  1. 14

    Javascript das laden und die Ausführung serialisiert wird durch den browser (es sei denn, Sie verwenden so etwas wie head.js), aber das problem ist, dass das DOM zur Verfügung stehen, für die Sie ein Skript, um es zu ändern. Die jQuery ready-Ereignis feuert nach das DOM verfügbar ist, so dass der browser bereits begonnen hat, beantragen die Ressourcen wurden auf die in der HTML.

    So, wenn Sie die Javascript-vor dem Bild-tag, es wird nicht in der Lage zu finden, die image-tags, und einmal bereit, feuert der download bereits begonnen hat. Ich bin mir nicht bewusst, irgendwelche Ereignisse, die ausgelöst werden, bevor Bild laden (nur eine für abgebrochen), also die sauberste Methode ist das erstellen der HTML-Seiten mit den geänderten src Attribute in den ersten Platz.

    Alternativ, setzen Sie die src in ein anderes Attribut auf dem Bild (wie data_orig_src) und führen Sie das Skript zum festlegen src zu data_orig_src auf jedem Bild auf Dokument bereit. Verwenden von CSS zum ausblenden der Bilder vor dem ändern der src so dass der Benutzer nicht sehen, ein gebrochenes Bild-Symbol. Ich denke, das ist wahrscheinlich besser, als die Bilder nach der Tat, weil Sie nicht brauchen, um zu verfolgen, wo die Bilder platziert werden müssen, im DOM, und es sollte besser als gut.

    Natürlich, wenn Sie können, ändern Sie den server für die Verwendung data_orig_src statt src, warum nicht einfach die richtigen src im tag-in Erster Linie...

    Okay, so klingt es wie die server-Seite ist der einzige Weg zu gehen. Danke.
    Der einzige Grund, den ich sehen konnte, zu tun, was Sie Fragen zu tun ist, wenn Sie nicht über Zugriff auf den server code oder die änderung war es äußerst schmerzhaft, warum auch immer.

    InformationsquelleAutor Scott A

  2. 7

    Können Sie nicht ändern, das DOM der Seite vor dem DOM geladen wurde. Und, sobald das DOM geladen ist, der browser hat bereits begonnen ersuchenden Bilder. So kann man nicht ändern <img> tags, bevor Sie beginnen, laden Ihre Bilder.

    Was Sie tun können, ändern Sie die Quelle der Seite, auf die keine der Bilder, die Sie ändern möchten, in den Quellcode der Seite, und verwenden Sie dann javascript, um dynamisch legen Sie die gewünschten Bilder aus, nachdem die Seite geladen wurde. Auf diese Weise wird der browser nie bitten, die falschen Bilder.

    Oder Sie könnte sich ändern, die <img> tags um nicht .src Eigentum an aller und mit Ihr Javascript fügen Sie die .src Eigenschaft. Ein <img> tag mit keine .src Eigenschaft wird nicht angezeigt, bis Sie es mit einem .src Eigenschaft.

    Wenn Sie sind besorgt über die falschen Bilder zu blinken, wie Sie geladen werden, bevor Sie Sie ändern, um die richtigen Bilder verwenden, können Sie CSS in ein stylesheet zu verstecken, die Bilder zunächst und dann nach der änderung der img.src auf den richtigen Wert und das neue .src Wert geladen wurde, können Sie machen Sie sichtbar.

    Wenn Sie nicht ändern können, den Quelltext der Seite, dann alles, was Sie tun können, ist das ausblenden der Bilder anfangs (mit CSS), bis die richtige .src wurde festgelegt wurden und dass neue .src Wert geladen wurde.

    Nur ein Hinweis auf das verstecken der Bilder, dann ändern Sie im img.src nach der Tat, ein problem, das man vielleicht in das alte Bild zeigt Sie kurz, während das neuere Bild geladen, so erhalten Sie ein bisschen einen "flash" - Effekt.
    Der ganze Sinn des Versteckens der Bilder ist zunächst, dass das alte Bild nicht zeigen.
    Genau, aber wenn Sie css verwenden, zu verbergen, jquery ändern Sie das Attribut, dann das Bild zeigen, es wird flash das alte Bild, während das neue Bild geladen.
    Getestet habe ich Safari, IE9 und Chrome und nicht sehen, eine flash. Firefox funktioniert flash (wie falsch). Sie können die show () - wenn das neue Bild geladen wird, wenn Sie verhindern möchten, dass der flash in Firefox. Hier ist eine demo: jsfiddle.net/jfriend00/fgK9q.
    Das funktioniert, wie ich es mag. 🙂

    InformationsquelleAutor jfriend00

  3. 0

    Es ist irgendwie möglich, aber nicht in der Weise, die Sie derzeit haben oder wahrscheinlich wollen und es nicht ordnungsgemäß beeinträchtigen, aber Sie können das Bild aus der html-und jQuery verwenden, stecken Sie es in Ihr html und anwenden was auch immer änderungen, die Sie wollen.

    Beispiel:

    var image = $('<img />').attr('src', 'imageURL.jpg');
image.appendTo('domElement');

    Aber es zu tun, wie dieser es macht keinen Sinn für mich, warum Sie würde nicht nur das Bild Bearbeiten Quelle eh.

    InformationsquelleAutor George Reith

Schreibe einen Kommentar