1. 首頁
  2. 問答
  3. 負荷圖像異步

負荷圖像異步

2013-04-14 105 views
16

如果我有像下面的圖片標籤：負荷圖像異步

<img src="myimage.jpg" />

，如果我添加「異步」來了：

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

圖像負載異步？

來源

2013-04-14 amateur

回答

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

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

這隻要你要求它在腳本開始加載圖像，並且每當圖像加載完成，它會抓住和圖像添加到它。

還有很多其他的方法可以做到這一點......
這只是一個簡單的異步加載單個圖像的例子。

但道德是這樣的：
對於異步加載的工作，無論是在JavaScript加載並使用onload事件，或包括頁面上的圖像標籤，而src屬性（指定HTML的width和height） ，然後回到某個地方，在JS中，並設置圖片的URL。

來源

2013-04-14 14:56:46 Norguard

+1

接下來我做了'

3

如果你使用jQuery，我做了一些簡單而有效的，是這樣的：

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

你可以擴展這包括每個圖像附加的可選屬性，但你的想法。

這將等待DOM準備就緒，然後動態（異步）將圖像加載到使用data-lazy-load-image屬性標記的元素中。我加入了CSS，使圖像在加載時「彈出」。

來源

2016-01-29 17:41:17

14

異步加載（延遲加載）內容的方式是不設置'src'屬性，然後在啓動DOM準備就緒時執行加載圖像的腳本。

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

，並在你的腳本：

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

這個用了jQuery，你不必雖然，這可以在JavaScript中通過把一個「的onload」在你的身體和懶惰要做的事在那裏加載內容。

來源

2016-05-24 11:15:47 patrick

+2

爲什麼這會得到一個downvote沒有評論？代碼的作用就像一個魅力，並給OP提供解決方案，以便他如何延遲加載他的內容...... – patrick

相關問題

 相關問題