carico immagine asincrono

Question

Se ho un tag di immagine come la seguente:

<img src="myimage.jpg" /> 

e se aggiungo "async" ad esso:

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

sarà

l'asincrono carico immagine?

Answer 1

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

Il tag immagine non supporta alcun attributo async.

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

Answer 2

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

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

Questo sarebbe iniziare a caricare un'immagine non appena lo si richiede in-script, e ogni volta che l'immagine è stata fatta caricamento, sarebbe afferrare e aggiungere l'immagine ad esso.

Ci sono molti altri modi per farlo ...
Questo è solo un esempio di semplice caricamento asincrono di una singola immagine.

Ma la morale è questa:
Per asincrona carico di lavoro, sia caricarlo in JavaScript e utilizzare l'onload, o includere il tag immagine sulla pagina, senza l'attributo src (specificare la width e height in HTML) e torna ad un certo punto, in JS, e imposta l'URL dell'immagine.

Answer 3

Potete leggere di più su attributo lazyload:

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

oppure si può dare la priorità:

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

Answer 4

Mentre @ esempio di Norguard è abbastanza semplice e facile abbastanza per un'immagine o due, ho trovato echo.js abbastanza utile per il caricamento lento, https://github.com/toddmotto/echo.

Fa caricare pigro le immagini con attributi data- * e ha anche alcune altre cose.

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

Answer 5

Se stai usando jQuery, ho fatto qualcosa di semplice, ma efficace, in questo modo:

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

Si potrebbe estendere questo per includere attributi aggiuntivi opzionali per ogni immagine, ma si ottiene l'idea.

Attenderà che il DOM sia pronto, quindi in modo dinamico (asincrono) carica le immagini nell'elemento che contrassegni con l'attributo data-lazy-load-image. Ho incluso il CSS per far "scoppiare" le immagini quando sono caricate.

Answer 6

Il modo di caricare asincrono (carico lento) del contenuto è di non impostare l'attributo 'src' e quindi di eseguire uno script che carica le immagini dopo che è stato lanciato DOM-ready.

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

e nel tuo script:

$(window).load(function(){ 
     $('.lazyload').each(function(){ 
      //* set the img src from data-src 
      $(this).attr('src', $(this).attr('data-src')); 
     }); 
    }); 

questo utilizza jQuery, non ci sono problemi, questo può essere fatto in JavaScript e mettendo un 'onload' nel vostro corpo e pigro caricare il contenuto lì.

Answer 7

tua soluzione è lazy-loading-image

https://github.com/tuupola/jquery_lazyload

Buona fortuna