obciążenie obraz asynchroniczny

Question

Jeśli mam tag obrazu jak następuje:

<img src="myimage.jpg" /> 

a jeśli dodać „async” do niego:

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

będzie asynchronicznego ładowania obrazu?

Answer 1

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

Znacznik obrazu nie obsługuje żadnego atrybutu asynchronicznego.

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; 

Byłoby rozpocząć ładowanie obrazu, jak tylko poprosić go w skrypt, i kiedy zdjęcie zostało zrobione ładowania, to chwycić i dodać do niej obraz.

Istnieje wiele innych sposobów na zrobienie tego ...
To jest po prostu nieżywy przykład asynchronicznego ładowania pojedynczego obrazu.

Ale morał jest taki:
Dla asynchroniczne ładowanie do pracy, albo załadować go w JavaScript i użyj onload lub zawierać znacznik obrazu na stronie, bez atrybutu src (określić width i height w HTML) i wrócić w pewnym momencie, w JS, i ustawić adres URL obrazu.

Answer 3

Możesz przeczytać więcej o atrybucie LazyLoad:

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

można też priorytety:

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

Answer 4

Podczas @ przykładem Norguard jest dość proste i łatwe wystarczających dla obrazu lub dwa, znalazłem echo.js całkiem poręczny dla leniwego ładowania, https://github.com/toddmotto/echo.

Wykonuje leniwne ładowanie obrazów z atrybutami danych * i zawiera także inne przydatne elementy.

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

Answer 5

Jeśli używasz jQuery, zrobiłem coś proste, ale skuteczne, na przykład:

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

Można by rozszerzyć tak, aby zawierały dodatkowe opcjonalne atrybuty dla każdego obrazu, ale masz pomysł.

To będzie czekać, aż DOM będzie gotowy, a następnie dynamicznie (asynchronicznie) załaduj obrazy do elementu, który zaznaczysz za pomocą atrybutu data-lazy-load-image. Dołączyłem CSS, aby obrazy były "wczytywane" po ich załadowaniu.

Answer 6

Sposób na asynchroniczne ładowanie (leniwe obciążenie) polega na tym, że nie ustawia się atrybutu "src", a następnie wykonuje skrypt, który ładuje obrazy po uruchomieniu DOM-ready.

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

oraz w skryptach:

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

ten wykorzystuje jQuery, nie trzeba jednak, można to zrobić w JavaScript, a także poprzez umieszczenie „onload” w swoim ciele i leniwy załaduj tam zawartość.

Answer 7

Twoje rozwiązanie jest lazy-loading-image

https://github.com/tuupola/jquery_lazyload

Powodzenia