JS實現(xiàn)圖片延遲加載并淡入淡出效果的簡單方法
更新時間：2016年08月25日 09:21:15 投稿：daisy
我們大家都知道，對于一個網(wǎng)站最占用帶寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，作為一個站長我們是千方百計的使用各種技巧來優(yōu)化圖片，但其實有一種簡單的方法，只需要幾行代碼就能達到這種效果。同時還附加一種淡入淡出的顯示效果，下面一起來看看。
話不多說，直接看示例
首先是圖片標記的寫法
<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;
}
這樣寫的作用是什么？等當圖片加載時，你就能看的效果了。
JavaScript代碼
我們最終會將 data-src 屬性去掉，換成src屬性，但這是圖片加載成功后的動作：
[].forEach.call(document.querySelectorAll('img[data-src]'), function(img) {
img.setAttribute('src', img.getAttribute('data-src'));
img.onload = function() {
img.removeAttribute('data-src');
};
});
相比起其它各種的圖片延遲加載技術(shù)，這種方法非常的簡單，它幾乎不要求其它任何條件，可以用在任何地方，使用起來非常靈活。
但是要注意的是，簡單有簡單的好壞，也會因為簡單而不足。它不具有圖片圖片滾動到可視窗口內(nèi)再加載的功能。最終使用哪種技術(shù)，還是要看場景而定。
以上就是本文的全部內(nèi)容，希望對大家的工作和學習能有所幫助。
相關(guān)文章
再談querySelector和querySelectorAll的區(qū)別與聯(lián)系
先按W3C的規(guī)范來說這兩個方法應(yīng)該返回的內(nèi)容吧，大家先看下官方的解釋，然后根據(jù)需要選擇使用2012-04-04
這篇文章主要介紹了JS繼承，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
uni-app使用countdown插件實現(xiàn)倒計時
這篇文章主要為大家詳細介紹了uni-app使用countdown插件實現(xiàn)倒計時，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11
這篇文章介紹了jquery滾動條事件的簡單實例，有需要的朋友可以參考一下2013-07-07
詳解原生JavaScript實現(xiàn)jQuery中AJAX處理的方法
這篇文章主要介紹了原生JavaScript實現(xiàn)jQuery中AJAX處理的方法,作者根據(jù)jQuery中一些對AJAX請求的處理方式來用原生API實現(xiàn),需要的朋友可以參考下2016-05-05
延時重復(fù)執(zhí)行函數(shù) lLoopRun.js
延時重復(fù)執(zhí)行函數(shù) lLoopRun.js...2007-05-05
javascript輕松實現(xiàn)當鼠標移開時已彈出子菜單自動消失
本文為大家詳細介紹下使用javascript實現(xiàn)當鼠標移開時已彈出子菜單自動消失，具體如下，感興趣的朋友不要錯過2013-12-12
Bootstrap優(yōu)化站點資源、響應(yīng)式圖片、傳送帶使用詳解3
這篇文章主要介紹了Bootstrap優(yōu)化站點資源、完成響應(yīng)式圖片、讓傳送帶支持手勢的相關(guān)知識,具有一定的參考價值，感興趣的小伙伴們可以參考一下2016-10-10
JavaScript中clientWidth,offsetWidth,scrollWidth的區(qū)別
這篇文章主要介紹了Element中clientWidth,offsetWidth,scrollWidth的區(qū)別，幫助大家更好的理解和使用JavaScript，感興趣的朋友可以了解下2021-01-01
JavaScript簡單生成 N~M 之間隨機數(shù)的方法
這篇文章主要介紹了JavaScript簡單生成 N~M 之間隨機數(shù)的方法,結(jié)合自定義函數(shù)分析了JS生成固定區(qū)間內(nèi)隨機數(shù)的相關(guān)操作技巧,具有一定參考借鑒價值,需要的朋友可以參考下2017-01-01