中文字幕免费精品_亚洲视频自拍_亚洲综合国产激情另类一区_色综合咪咪久久

我們大家都知道，對于一個網站最占用帶寬，最影響頁面顯示速度的東西就是圖片。圖片是很重要的，作為一個站長我們是千方百計的使用各種技巧來優化圖片，但其實有一種簡單的方法，只需要幾行代碼就能達到這種效果。同時還附加一種淡入淡出的顯示效果，下面一起來看看。

話不多說，直接看示例

首先是圖片標記的寫法:

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

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

CSS代碼

所有具有data-src屬性的圖片，我們將其初始顯示狀態為不可見，通過透明度來調節：

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

 };

});

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

但是要注意的是，簡單有簡單的好壞，也會因為簡單而不足。它不具有圖片圖片滾動到可視窗口內再加載的功能。最終使用哪種技術，還是要看場景而定。

以上就是本文的全部內容，希望對大家的工作和學習能有所幫助。