站長資訊網php實現(xiàn)圖片延時加載的方法：在到達指定加載圖片位置時，用data-src屬性值替換img的src屬性值即可，如【imgs[i].src = imgs[i].getAttribute('data-src');】。
在到達指定加載圖片位置時，用data-src的屬性值替換img的src的屬性值即可，這個時候img就會去請求資源。
（推薦教程：php視頻教程）
imgs[i].src = imgs[i].getAttribute('data-src');
代碼實現(xiàn)：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>圖片懶加載</title> <style> img { display: block; width: 100%; height: 300px; margin-bottom: 20px; } </style> </head> <body> <img data-src="./images/1.jpg" alt=""> <img data-src="./images/2.jpg" alt=""> <img data-src="./images/3.jpg" alt=""> <img data-src="./images/4.jpg" alt=""> <img data-src="./images/5.jpg" alt=""> <img data-src="./images/6.jpg" alt=""> <img data-src="./images/7.jpg" alt=""> <img data-src="./images/8.jpg" alt=""> <img data-src="./images/9.jpg" alt=""> <img data-src="./images/10.jpg" alt=""> <img data-src="./images/1.jpg" alt=""> <img data-src="./images/2.jpg" alt=""> </body> <script> var imgs = document.querySelectorAll('img'); //offsetTop是元素與offsetParent的距離，循環(huán)獲取直到頁面頂部 function getTop(e) { var T = e.offsetTop; while(e = e.offsetParent) { T += e.offsetTop; } return T; } function lazyLoad(imgs) { var H = document.documentElement.clientHeight;//獲取可視區(qū)域高度 var S = document.documentElement.scrollTop || document.body.scrollTop; for (var i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src'); } } } window.onload = window.onscroll = function () { //onscroll()在滾動條滾動的時候觸發(fā) lazyLoad(imgs); } </script> </html>
