欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JS實(shí)現(xiàn)圖片延遲加載并淡入淡出效果的簡(jiǎn)單方法

 更新時(shí)間：2016年08月25日 09:21:15   投稿：daisy  
我們大家都知道，對(duì)于一個(gè)網(wǎng)站最占用帶寬，最影響頁(yè)面顯示速度的東西就是圖片。圖片是很重要的，作為一個(gè)站長(zhǎng)我們是千方百計(jì)的使用各種技巧來(lái)優(yōu)化圖片，但其實(shí)有一種簡(jiǎn)單的方法，只需要幾行代碼就能達(dá)到這種效果。同時(shí)還附加一種淡入淡出的顯示效果，下面一起來(lái)看看。

話不多說(shuō)，直接看示例

首先是圖片標(biāo)記的寫法

<img data-src="/images/image.jpg" alt="">

需要將圖片的地址放到 data-src 屬性里，而src值不需要，直接將src屬性去掉。

CSS代碼

所有具有data-src屬性的圖片，我們將其初始顯示狀態(tài)為不可見(jiàn)，通過(guò)透明度來(lái)調(diào)節(jié)：

img {
 opacity: 1;
 transition: opacity 0.3s;
}

img[data-src] {
 opacity: 0;
}

這樣寫的作用是什么？等當(dāng)圖片加載時(shí)，你就能看的效果了。

JavaScript代碼

我們最終會(huì)將 data-src 屬性去掉，換成src屬性，但這是圖片加載成功后的動(dòng)作：

[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
 img.setAttribute('src', img.getAttribute('data-src'));
 img.onload = function() {
 img.removeAttribute('data-src');
 };
});

相比起其它各種的圖片延遲加載技術(shù)，這種方法非常的簡(jiǎn)單，它幾乎不要求其它任何條件，可以用在任何地方，使用起來(lái)非常靈活。

但是要注意的是，簡(jiǎn)單有簡(jiǎn)單的好壞，也會(huì)因?yàn)楹?jiǎn)單而不足。它不具有圖片圖片滾動(dòng)到可視窗口內(nèi)再加載的功能。最終使用哪種技術(shù)，還是要看場(chǎng)景而定。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的工作和學(xué)習(xí)能有所幫助。

相關(guān)文章

最新評(píng)論