新闻中心 网络推广 网站建设 优化推广 首页>新闻>网站建设

网站图片太大的时候,使用懒加载的方式

时间:2025-03-09   访问量:0

这是全部IMG都会进行懒加载的,

 <img   data-src="[list:ico]"  alt="[list:title]" >

JS代码

<!-- 页面图片延迟加载 -->
<script>
var imgs = document.querySelectorAll('img');
  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])) {
        if (imgs[i].getAttribute('data-src')) {
          imgs[i].src = imgs[i].getAttribute('data-src');
        }
      }
    }
  };
  window.onload = window.onscroll = function() {
    lazyLoad(imgs);
  };
  </script>


如果需要指定的话,可以将JS修改:

<!-- 页面图片延迟加载 -->
<script>
window.onload = window.onscroll = function () {
    var imgs = document.querySelectorAll('.lazy_location img');
    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])) {
                if (imgs[i].getAttribute('data-src')) {
                    imgs[i].src = imgs[i].getAttribute('data-src');
                    console.log("图片加载:", imgs[i].src);
                }
            }
        }
    }
    lazyLoad(imgs); // 页面加载时检查一次
};
  </script>


然后对图片添加CLASS类:

 <a href="javascript:;"  class="lazy_location">
                          <img   data-src="[list:ico]"  alt="[list:title]" >
                         </a>


服务咨询
1对1咨询,专业客服为您解疑答惑
联系销售
15899750475
在线咨询
联系在线客服,为您解答所有的疑问
ARE YOU INTERESTED IN ?
感兴趣吗?

有关我们服务的更多信息,请联系项目经理

15899750475 杨先生