网站优化:简单三步引入懒加载(LazyLoad)

  • 内容
  • 相关

202001311018074861.gif

网站加载慢多半是废了?你尝试过优化吗?服务器宽带1-3M你首页放几十张图片他能不加载缓慢吗?

优化的方法只有添加CDN分发,或者改造引入懒加载,(懒加载就是延时加载)

引入懒加载方法如下:

第一步:

引入jquery.js和jquery.lazyload.js,将下面俩段js放入</head>标签前面任意位置。

第二步:

在需要懒加载的地方添加ID“lazy”如下面这段一样。

<img class="lazy" src="" data-original="这里为懒加载的图片地址" width="100" height="100" alt="沃的资源网">

第三步:

实现懒加载还需要需要在放一段js到你网站</body>标签前面。如下;

<script type="text/javascript">
$(function() {
    $("img.lazy").lazyload({
        threshold : 200, // 设置延迟多少毫秒
        effect : "fadeIn" // 图片渐入特效
    });
});
</script>

以上即是引入教程。

免责声明:本站一切资源不代表本站立场,如有侵权,请联系本站删除。

发表评论

电子邮件地址不会被公开。 请勿发送垃圾内容!