tải hình ảnh không đồng bộ

Question

Nếu tôi có một thẻ hình ảnh như sau:

<img src="myimage.jpg" /> 

và nếu tôi thêm "async" với nó:

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

sẽ không đồng bộ tải hình ảnh?

Answer 1

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

Thẻ hình ảnh không hỗ trợ bất kỳ thuộc tính không đồng bộ nào.

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; 

này sẽ bắt đầu tải một hình ảnh ngay sau khi bạn yêu cầu nó trong kịch bản, và bất cứ khi nào hình ảnh đã được thực hiện tải, nó sẽ lấy và thêm hình ảnh vào nó.

Có rất nhiều cách khác để thực hiện việc này ...
Đây chỉ là một ví dụ đơn giản về tải không đồng bộ của một hình ảnh đơn giản.

Nhưng đạo đức là thế này:
Đối async tải để làm việc, hoặc tải nó trong JavaScript và sử dụng onload, hoặc bao gồm các thẻ hình ảnh trên trang web, mà không có thuộc tính src (ghi rõ width và height trong HTML) và quay lại một số điểm, trong JS và đặt URL hình ảnh.

Answer 3

Bạn có thể đọc thêm về thuộc tính lazyload:

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

hoặc bạn có thể ưu tiên:

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

Answer 4

Trong khi @ dụ Norguard là khá đơn giản và dễ dàng enought cho một hoặc hai hình ảnh, tôi đã tìm thấy echo.js khá tiện dụng để tải xuống, https://github.com/toddmotto/echo.

Nó tải hình ảnh lười biếng với thuộc tính data- * và đi kèm với một số thứ khác gọn gàng.

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

Answer 5

Nếu bạn đang sử dụng jQuery, tôi đã làm một cái gì đó đơn giản, nhưng hiệu quả, như thế này:

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

Bạn có thể mở rộng này để bao gồm thuộc tính tùy chọn bổ sung cho mỗi hình ảnh, nhưng bạn sẽ có được ý tưởng.

Điều này sẽ đợi cho đến khi DOM sẵn sàng, sau đó động (không đồng bộ) tải hình ảnh vào phần tử bạn đánh dấu bằng thuộc tính data-lazy-load-image. Tôi đã bao gồm CSS để làm cho hình ảnh "pop in" khi chúng được tải.

Answer 6

Cách tải không đồng bộ (tải chậm) nội dung là không đặt thuộc tính 'src' và sau đó thực thi tập lệnh tải hình ảnh khi DOM sẵn sàng được khởi chạy.

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

và trong kịch bản của bạn:

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

này sử dụng jQuery, bạn không cần phải mặc dù, điều này có thể được thực hiện trong JavaScript cũng bằng cách đặt một 'onload' trong cơ thể và lười biếng của bạn tải nội dung ở đó.

Answer 7

giải pháp của bạn là lazy-loading-image

https://github.com/tuupola/jquery_lazyload

Chúc may mắn