話不多說，直接看示例
首先是圖片標記的寫法
<img data-src="/images/image.jpg">
需要將圖片的地址放到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'); };});相比起其它各種的圖片延遲加載技術，這種方法非常的簡單，它幾乎不要求其它任何條件，可以用在任何地方，使用起來非常靈活。
但是要注意的是，簡單有簡單的好壞，也會因為簡單而不足。它不具有圖片圖片滾動到可視窗口內再加載的功能。最終使用哪種技術，還是要看場景而定。
以上就是本文的全部內容，希望對大家的工作和學習能有所幫助。