webentwicklung-frage-antwort-db.com.de

bild asynchron laden

Wenn ich ein Image-Tag wie das folgende habe:

<img src="myimage.jpg" />

und wenn ich "async" hinzufüge:

<img async src="myimage.jpg" />

wird das Image asynchron geladen?

24
amateur
var img = new Image(),
    url = "myimg.jpg",
    container = document.getElementById("holder-div");

img.onload = function () { container.appendChild(img); };
img.src = url;

Dadurch würde ein Bild geladen, sobald Sie es im Skript angefordert haben. Sobald das Bild geladen wurde, wird es geladen und das Bild hinzugefügt.

Es gibt viele andere Möglichkeiten, dies zu tun ...
Dies ist nur ein einfaches Beispiel für das asynchrone Laden eines einzelnen Bildes.

Aber die Moral ist folgende:
Damit asynchrones Laden funktioniert, laden Sie es entweder in JavaScript und verwenden Sie das Onload, oder fügen Sie das Image-Tag ohne das Attribut src in die Seite ein (geben Sie in HTML die Variablen width und height an) JS und legen Sie die Bild-URL fest.

28
Norguard

Das asynchrone Laden (Lazy Load) des Inhalts besteht darin, das Attribut 'src' nicht festzulegen und dann ein Skript auszuführen, das die Bilder lädt, sobald DOM-ready gestartet wird. 

 <img data-lazysrc='http://www.amazingjokes.com/images/20140902-amazingjokes-title.png'/>

und mit jQuery (oder auch mit einfachem JavaScript möglich) verwenden Sie den folgenden Code (wie vorgeschlagen hier):

<script>  
function ReLoadImages(){
    $('img[data-lazyload]').each( function(){
        //* set the img src from data-src
        $( this ).attr( 'src', $( this ).attr( 'data-lazyload' ) );
        }
    );
}

document.addEventListener('readystatechange', event => {
    if (event.target.readyState === "interactive") {  //or at "complete" if you want it to execute in the most last state of window.
        ReLoadImages();
    }
});
</script>
25
patrick
<img async src="myimage.jpg" />

Das Image-Tag unterstützt keine asynchronen Attribute.

http://www.w3.org/TR/html5/embedded-content-0.html#the-img-element

6
mpm

Wenn Sie jQuery verwenden, habe ich etwas einfaches und dennoch effektives gemacht:

HTML

<div data-lazy-load-image="/Images/image-name.png" data-image-classname="pop-in"></div>

JavaScript

$(function () {
    $("[data-lazy-load-image]").each(function (index, element) {
        var img = new Image();
        img.src = $(element).data("lazy-load-image");
        if (typeof $(element).data("image-classname" !== "undefined"))
            img.className = $(element).data("image-classname");
        $(element).append(img);
    });
});

CSS

@-webkit-keyframes pop-in {
    0% { opacity: 0; -webkit-transform: scale(0.5); }
    100% { opacity: 1; -webkit-transform: scale(1); }
}
@-moz-keyframes pop-in {
    0% { opacity: 0; -moz-transform: scale(0.5); }
    100% { opacity: 1; -moz-transform: scale(1); }
}
@keyframes pop-in {
    0% { opacity: 0; transform: scale(0.5); }
    100% { opacity: 1; transform: scale(1); }
}

Sie können dies erweitern, um zusätzliche optionale Attribute für jedes Bild hinzuzufügen, aber Sie bekommen die Idee.

Dies wird warten, bis das DOM fertig ist, und lädt die Bilder dynamisch (asynchron) in das Element, das Sie mit dem Attribut data-lazy-load-image markieren. Ich habe das CSS eingefügt, damit die Bilder beim Laden "eintauchen".

3
John Washam

Während @ Norguards Beispiel für ein oder zwei Bilder ziemlich einfach und leicht genug ist, habe ich echo.js für praktisches Laden praktisch gefunden, https://github.com/toddmotto/echo

Das Laden von Bildern mit Daten- * Attributen ist faul, und es gibt noch ein paar nette Dinge.

<img data-echo="img/photo.jpg">
<script src="dist/echo.js"></script>
<script>
    echo.init();
</script>
3

Ich sehe hier viele Antworten mit Jquery oder einer anderen library, nur um diese einfache Aufgabe zu erledigen. Dies kann mit Promise in Javascripts geschehen, was dazu dient, Dinge asynchron auszuführen.

function asyncImageLoader(url){
    return new Promise( (resolve, reject) => {
        var image = new Image()
        image.src = url
        image.onload = () => resolve(image)
        image.onerror = () => reject(new Error('could not load image'))
    })
}    

// then use it like this

var image = asyncImageLoader(url)


image.then( res => {
    console.log(res)
})
2
anekix

Ich habe den folgenden Ansatz mit jQuery verwendet.

Verwenden Sie zunächst kein "src" -Attribut im Image-Tag, sondern ordnen Sie Ihre Quelle einem anderen Attribut zu:

<img async-src="/mydirectory/myimage.jpg" />

Anschließend verwende ich in der Funktion "jQuery document-ready" diesen Code, um die async-src des Elements in die eigentliche src des Elements zu kopieren:

$("img[async-src]").each(function(index) {
    $(this).attr("src", $(this).attr("async-src"));
});

Anmerkungen:

die .each-Funktion von jQuery verarbeitet die Tags möglicherweise in der Reihenfolge, in der sie im HTML/DOM codiert sind, aber Bildgrößen und Netzwerkprobleme können dazu führen, dass Bilder nicht tatsächlich nacheinander geladen werden. Mit anderen Worten, Ihr drittes async-src-Bild wird möglicherweise visuell auf dem Bildschirm angezeigt, bevor das erste Bild vollständig geladen wurde.

Wenn Ihr Seitenlayout von den Pixelabmessungen dieser Bilddatei abhängt - z. Sie definieren die Abmessungen des Bildes nicht über Tag-Attribute, CSS oder ein übergeordnetes Element. Dann müssen Sie möglicherweise ein "src" -Attribut für die Originaldatei verwenden, das auf ein leeres weißes oder klares GIF der gewünschten Abmessungen verweist.

Wenn Sie schließlich nach dem asynchronen Laden des Bilds Code verarbeiten möchten, um beispielsweise einen Überblendungseffekt zu behandeln oder ein für das Element relevantes CSS-Tag zu ändern, erweitern Sie die jQuery folgendermaßen:

$("img[async-src]").each(function(index) {
    $(this).load(function() {
        // code to run after loading
    });
    $(this).attr("src", $(this).attr("async-src"));
});
1
Deke

Während einige andere Antworten Möglichkeiten zum asynchronen Abrufen von Bildern aufzeigen, kann es auch hilfreich sein, zu wissen, dass <img />-Tag unterstützt ein Attribut, das als Hinweis auf den Browser dient, der möglicherweise führen dazu, dass Bilder asynchron decodiert werden. Es scheint nicht von Internet Explorer unterstützt zu werden.

<img src="myimage.jpg" decoding="async"/>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Img#attr-decoding

https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/decoding

https://github.com/whatwg/html/issues/192

0
derekbaker783

Sie können mehr über Lazyoad-Attribute lesen:

<img src="myimage.jpg" alt="some description" lazyload/> - with default values

oder Sie können Prioritäten setzen:

<img src="myimage.jpg" alt="some description" lazyload="1"/>
<img src="myimage.jpg" alt="some description" lazyload="2"/>
0