图片懒加载

Sonder

2020-05-14

5516字

14分钟

浏览 (2.5k)

推荐使用data-src的时候图片不要加src属性

复制代码

<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>Document</title>
</head>
<body>
   <style>
       img[data-src] {
           display: block;
       }
   </style>

   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i39.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i40.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i41.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i42.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i43.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i44.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i45.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i46.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i47.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i48.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i49.jpg" alt="">
   <img src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i50.jpg" alt="">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i1.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i2.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i3.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i4.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i5.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i6.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i7.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i8.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i9.jpg">
   <img alt="" data-src="https://8150e502a00d512ce440-4f545a264b21ec0a641efaa20af32482.ssl.cf4.rackcdn.com/d300x200/i10.jpg">
</body>
<script type="text/javascript">
   window.onscroll = function () {
       Limg()
   }
   window.onload = function () {
       var img = document.querySelectorAll("img[data-src]")
       for (var i = 0; i < img.length; i++) {
           img[i].style.opacity = "0"
       }
       Limg();
   }

   function Limg() {
       var viewHeight = document.documentElement.clientHeight


       var t = document.documentElement.scrollTop || document.body.scrollTop;

       var limg = document.querySelectorAll("img[data-src]")

       Array.prototype.forEach.call(limg, function (item, index) {
           var rect;
           if (item.getAttribute("data-src") === ""){
               return
           }
           //getBoundingClientRect
           rect = item.getBoundingClientRect();
           if (rect.bottom >= 0 && rect.top < viewHeight) {
               (function () {
                   var img = new Image()
                   img.src = item.getAttribute("data-src")
                   item.src = img.src
                   var j = 0
                   setInterval(function () {
                       j += 0.2
                       if (j <= 1) {
                           item.style.opacity = j
                           return
                       }
                   }, 100)
                   item.removeAttribute('data-src')
               })()
           }
       })
   }

</script>
</html>

如果面试官问你如何实现图片懒加载

复制代码

window.addEventListener("scroll", lazyload);

复制代码

function lazyload() {
 let viewHeight = document.body.clientHeight; //获取可视区高度
 let imgs = document.querySelectorAll("img[data-src]");
 imgs.forEach((item, index) => {
   if (item.dataset.src === "") return;

   // 用于获得页面中某个元素的左，上，右和下分别相对浏览器视窗的位置
   let rect = item.getBoundingClientRect();
   if (rect.bottom >= 0 && rect.top < viewHeight) {
     item.src = item.dataset.src;
     item.removeAttribute("data-src");
   }
 });
}

上一篇 / 基于bootstrap的面板选中效果下一篇 / 相当于jQuery中$('input [name$=“value”]')的Javascript如何写？

图片懒加载

🎯 相关文章

💡 推荐文章

🕵️‍♂️ 评论 (0)