关于图片懒加载的用法

最新推荐文章于 2022-04-18 16:38:47 发布

weixin_30784945

最新推荐文章于 2022-04-18 16:38:47 发布

阅读量87

点赞数

原文链接：http://www.cnblogs.com/yexuelaoren/p/6110385.html

版权

<!DOCTYPE html>
<html lang="en">
<meta charset="UTF-8">
<style>
  ul {
    margin: 0 auto;
    padding: 0;
    width: 300px;
    list-style: none;
  }
  .lazy {
    margin-bottom: 100px;
    width: 300px;
    height: 168px;
    text-align: center;
    line-height: 168px; /*垂直居中*/
  }
    
</style>
<body>
    <ul>
      <li class='lazy'><img data-original='images/0.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/1.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/2.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/3.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/4.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/5.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/6.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/7.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/8.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/9.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/10.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/11.jpg' src='images/loading.gif'/></li>
      <li class='lazy'><img data-original='images/12.jpg' src='images/loading.gif'/></li>
    </ul>
  <script>
    init();
    function init() {
      var images = document.images;
      // 加载首屏图片
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        // 如果在可视区域并且还没被加载过
        if(obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          // 先调用 HTML5 方法
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        } else {
          break;
        }
      }
    }
    window.onscroll = function() {
      lazyload();
    };
    
    function lazyload() {
      var lazy = 500;
      var images = document.images;
      for (var i = 0, len = images.length; i < len; i++) {
        var obj = images[i];
        if (obj.getBoundingClientRect().top - lazy < document.documentElement.clientHeight && !obj.isLoad) {
          obj.isLoad = true;
          obj.style.cssText = "transition: ''; opacity: 0;"
          if (obj.dataset) 
            imageLoaded(obj, obj.dataset.original);
          else 
            imageLoaded(obj, obj.getAttribute('data-original'));
        }
        if (obj.getBoundingClientRect().top < document.documentElement.clientHeight && !obj.isShow) {
          obj.isShow = true;
          obj.style.cssText = "transition: 1s; opacity: 1;"
        }
      }
    }
    function imageLoaded(obj, src) {
      var img = new Image();
      img.onload = function() {
        obj.src = src;
      };
      img.src = src;
    }
  </script>
</body>
</html>

转载于:https://www.cnblogs.com/yexuelaoren/p/6110385.html

weixin_30784945

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
关于图片懒加载的用法

<!DOCTYPE html><html lang="en"><meta charset="UTF-8"><style> ul { margin: 0 auto; padding: 0; width: 300px; list-style: none; } .lazy { ...
复制链接

扫一扫