web-dev-qa-db-fra.com

charger l'image asynchrone

Si j'ai une étiquette d'image comme celle-ci:

<img src="myimage.jpg" />

et si j'y ajoute "async":

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

l'image se chargera-t-elle de manière asynchrone?

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

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

Cela commencerait à charger une image dès que vous le demanderiez dans le script, et chaque fois que le chargement de l’image serait terminé, il saisirait et y ajouterait l’image.

Il y a beaucoup d'autres façons de faire cela ...
Ceci est juste un exemple simple du chargement asynchrone d’une seule image.

Mais la morale est la suivante:
Pour que le chargement asynchrone fonctionne, chargez-le en JavaScript et utilisez onload, ou incluez la balise image sur la page, sans l'attribut src (spécifiez les width et height en HTML), puis revenez à JS et définissez l'URL de l'image.

28
Norguard

La façon de charger le contenu de manière asynchrone (chargement différé) est de ne pas définir l'attribut 'src', puis d'exécuter un script qui charge les images une fois que DOM-ready est lancé. 

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

et avec jQuery (ou possible avec JavaScript également), utilisez le code ci-dessous (comme suggéré ici):

<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" />

La balise image ne prend en charge aucun attribut asynchrone.

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

6
mpm

Si vous utilisez jQuery, j'ai fait quelque chose de simple, mais efficace, comme ceci:

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); }
}

Vous pouvez étendre cela pour inclure des attributs facultatifs supplémentaires pour chaque image, mais vous en avez l’idée.

Cela attendra que le DOM soit prêt, puis chargera les images de manière dynamique (dans le sens asynchrone) dans l'élément que vous marquez avec l'attribut data-lazy-load-image. J'ai inclus le CSS pour que les images "apparaissent" lorsqu'elles sont chargées.

3
John Washam

Bien que l'exemple de @ Norguard soit assez simple et facile pour une image ou deux, j'ai trouvé echo.js plutôt pratique pour le chargement paresseux, https://github.com/toddmotto/echo . 

Il charge paresseusement les images avec des attributs data * et vient avec quelques autres choses soignées.

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

Je vois beaucoup de réponses ici en utilisant Jquery ou un certain library juste pour faire cette tâche simple. Cela peut être fait en utilisant Promise dans javascripts qui sert à faire les choses de manière asynchrone.

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

Vous pouvez en savoir plus sur l'attribut lazyload:

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

ou vous pouvez donner la priorité:

<img src="myimage.jpg" alt="some description" lazyload="1"/>
<img src="myimage.jpg" alt="some description" lazyload="2"/>
0
Miroslav Šiška