当前位置:首页 >> 技术分享 >> 详情
sousuo
sousuo

Lazy Load让你的网站上的图片实现延迟加载

上传时间:2020-07-30            浏览次数:66

我司yongyisou.js中已经引入jquery、lazyload主程序和初始化JS,所以JS的书写只要有一下内容,即可:

在进行网页的架构中,只需要在页面上运用这个延迟加载效果即可。使用时候请这样调用:

<img  src="/images/grey.gif" data-original="/upload/pic/qy64.jpg" width="295" height="295" class="lazy" alt="建筑设备类网站模板/界面简洁、多行业通用、易于SEO" />

其中:

src调用空白gif图片

data-original写真实的图片网址

 class里需要写上lazy这个类,即可让这个img能够延迟加载图片

注意:这是老版本的lazy load写法,新版本的会把data-original 改为:data-src,请注意辨别。

以下是参考资料,从网络上搜集来的,关于Lazy Load使用方法

第一步:引用jquery和jquery.lazyload.js到你的页面

<script src="jquery-1.11.0.min.js"></script>
<script src="jquery.lazyload.js?v=1.9.1"></script>

第二步:html图片调用方法

为图片加入样式lazy  图片路径引用方法用data-original

<img class="lazy" data-original="img/bmw_m1_hood.jpg">
<img class="lazy" data-original="img/bmw_m1_side.jpg">
<img class="lazy" data-original="img/viper_1.jpg">
<img class="lazy" data-original="img/viper_corner.jpg">
<img class="lazy" data-original="img/bmw_m3_gt.jpg">
<img class="lazy" data-original="img/corvette_pitstop.jpg">
js出始化lazyload并设置图片显示方式
<script type="text/javascript" charset="utf-8">
  $(function() {
      $("img.lazy").lazyload({effect: "fadeIn"});
  });
</script>
在图片中也可以不使用 class="lazy",初始化时使用:
$("img").lazyload({effect: "fadeIn"});
这样就可以对全局的图片都有效!
如果想提载入图片,可以使用 threshold 进行设置,
$("img.lazy").lazyload({ threshold :180});
以上实例的含义是:在图片距离屏幕180px时提前载入:
永易搜建站用技术和实力说话
0371-56789390
公司地址

郑州市花园路东风路向西300路南弘熹台22层

联系我们