php如何实现图片延时加载

互联网 20-10-19

php实现图片延时加载的方法：在到达指定加载图片位置时，用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');

代码实现：

<!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的距离，循环获取直到页面顶部         function getTop(e) {             var T = e.offsetTop;             while(e = e.offsetParent) {                 T += e.offsetTop;             }             return T;         }          function lazyLoad(imgs) {             var H = document.documentElement.clientHeight;//获取可视区域高度             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()在滚动条滚动的时候触发             lazyLoad(imgs);         } </script> </html>

php如何实现图片延时加载

相关资讯

标签推荐