JS實(shí)現(xiàn)圖片延遲加載并淡入淡出效果的簡(jiǎn)單方法
更新時(shí)間：2016年08月25日 09:21:15 投稿：daisy
我們大家都知道，對(duì)于一個(gè)網(wǎng)站最占用帶寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，作為一個(gè)站長(zhǎng)我們是千方百計(jì)的使用各種技巧來優(yōu)化圖片，但其實(shí)有一種簡(jiǎn)單的方法，只需要幾行代碼就能達(dá)到這種效果。同時(shí)還附加一種淡入淡出的顯示效果，下面一起來看看。
話不多說，直接看示例
首先是圖片標(biāo)記的寫法
<img data-src="/images/image.jpg" alt="">
需要將圖片的地址放到 data-src 屬性里，而src值不需要，直接將src屬性去掉。
CSS代碼
所有具有data-src屬性的圖片，我們將其初始顯示狀態(tà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)單，它幾乎不要求其它任何條件，可以用在任何地方，使用起來非常靈活。
但是要注意的是，簡(jiǎn)單有簡(jiǎn)單的好壞，也會(huì)因?yàn)楹?jiǎn)單而不足。它不具有圖片圖片滾動(dòng)到可視窗口內(nèi)再加載的功能。最終使用哪種技術(shù)，還是要看場(chǎng)景而定。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的工作和學(xué)習(xí)能有所幫助。
相關(guān)文章
在JavaScript的ES6版本中,引入了WeakMap和WeakSet這兩種新的數(shù)據(jù)結(jié)構(gòu),與Map和Set相比,它們有一些特殊的特點(diǎn)和用途,使它們?cè)谔幚韮?nèi)存泄漏問題、管理對(duì)象私有數(shù)據(jù)、處理對(duì)象的唯一性等場(chǎng)景中有顯著的優(yōu)勢(shì),本文將深入探討WeakMap和WeakSet的特性和用途,一起看看吧2023-12-12
Javascript實(shí)現(xiàn)的鼠標(biāo)經(jīng)過時(shí)播放聲音
今天突然想起做一個(gè)當(dāng)鼠標(biāo)經(jīng)過<a/>時(shí)，會(huì)發(fā)出聲音2010-05-05
這篇文章主要為大家詳細(xì)介紹了第二篇Javascript動(dòng)畫效果,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
這篇文章主要為大家詳細(xì)介紹了微信小程序多項(xiàng)選擇器checkbox，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了iframe如何調(diào)用父頁面函數(shù)，下面有個(gè)不錯(cuò)的示例，大家可以參考下2014-07-07
用js+iframe形成頁面的一種遮罩效果的具體實(shí)現(xiàn)
用js形成頁面的一種遮罩效果，選擇想要進(jìn)行遮罩的窗口，在這里想要遮罩的是一個(gè)iframe窗口，具體的實(shí)現(xiàn)如下，感興趣的朋友可以參參考下2013-12-12
微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器
這篇文章介紹了微信小程序?qū)崿F(xiàn)簡(jiǎn)易計(jì)算器的方法，文中通過示例代碼介紹的非常詳細(xì)。對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2022-06-06
javascript獲取客戶端IP的小程序，下面的代碼是我在所有windowsNT5.0及以上的系統(tǒng)上都測(cè)試通過的，喜歡的朋友可以收藏下2013-11-11
深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù)
這篇文章主要介紹了深入淺出ES6新特性之函數(shù)默認(rèn)參數(shù)和箭頭函數(shù) 的相關(guān)資料,需要的朋友可以參考下2016-08-08
本文做了一個(gè)JavaScript的求愛小特效，不僅能出現(xiàn)下面的圖的效果，還可以讓這個(gè)圖形跟隨著鼠標(biāo)轉(zhuǎn)動(dòng)哦,需要的朋友可以參考下2014-05-05