SEO技术博客建站周边 ↬ 正文建站周边

记录我为帝国cms网站制作图片lazyload懒加载的过程

深山2019-01-12 14:55建站周边快速评论

使用Query.lazyload图片延迟加载,可以提高网页下载速度,在某些情况下图片延迟加载也能帮助减轻服务器负载。我这次测试的网站是帝国cms7.5。

由于对代码一窍不通,所以也是在网上爬了很久才搞定www.vipshan.com这个网站图片的懒加载,于是乎我要做一次记录,以后参考(如果本次方法有错,也方便以后对照)。

什么是懒加载?

懒加载是一种网页交互呈现效果,简单来说就是,打开网页之后,首次只加载第一屏的图片,如果往下拖动网页,则继续加载能看见区域的图片(网页上不可视范围也没有浏览过的图片则不加载),使用图片懒加载好处避免网站图片一次性加载从而导致网页速度慢的弊端。

什么是图片懒加载

废话不多说,我直接讲下啷个用吧,反正也不是我写的js(我也不会)。

需要用到的代码

两个js文件

  • /uploads/allimg/190519/12530C4Z-1.jpg(这个js大部分网站一般都有的,自行检查,如果没有可以下载)
  • /uploads/allimg/190519/12530611C-2.jpg(迷你压缩版,只有4K左右,图片延迟加载就靠它)

 

引用懒加载js文件

确保两个js文件都上传到自己网站目录之后,进行引用!

<script src="/uploads/allimg/190519/12530C4Z-1.jpg"></script>
<script src="/uploads/allimg/190519/12530611C-2.jpg"></script>

路径改为自己js文件存放的路径,引用一般建议引用到底部模板,当然你引用到头部也可以。

初始化lazyload并设置图片显示方式

一般网站都是为图片加入class="lazy"样式,图片路径用data-original引用,如下:

<img class="lazy" data-original="/d/file/2018/123.jpg">
<img class="lazy" data-original="/d/file/2018/456.jpg">

但是深山不懂代码,批量替换也可以,但是帝国cms改起来可比dedecms难多了,所以我在网上爬到了一种即为简单的方法,不需要去为图片加class="lazy",js初始化时用下面这则代码,即可对全站图片都有效。

<script type="text/javascript">
  $(function() {
      $("img").lazyload({effect: "fadeIn"});//图片加载效果
  });
</script>

jquery.lazyload.min.js引用方式及初始化具体如下图:

lazyload.js初始化

以上步骤都做完之后,生成全站,就已经达到了图片延迟加载的效果了,但是这时我网站(www.vipshan.com)右侧有一块缩略图不显示了,可能是因为代码顺序的问题,这个位置的代码包括图片都在在网站比较底部。

这是图片不按顺序(不连续)加载导致的,可以把下面这段代码加到lazyload.js初始化里面

<script type="text/javascript">
 $(function() {
      $("img").lazyload({failurelimit:20});//20为数值,可修改
  });
</script>

PS:大意就是在网页可视范围(屏幕范围)循环加载图片,检测有没有在可视范围内没有显示出来的图片,加载范围多少张取决于你上边儿设置的数值。据说在某些网站中是不能用failurelimit选项来控制加载行为的,但是今天我是靠它实现的,也一并记录下来。

最后的在网页中的代码如下图:

如果说你觉得这样难看,你加到你的公用js里面也是可以的。

failurelimit控制图片加载

lazyload常用参数设置

<script type="text/javascript">
$("img.lazy").lazyload({
  placeholder : "img/grey.gif", //用图片提前占位
    // placeholder,值为某一图片路径.此图片用来占据将要加载的图片的位置,待图片加载时,占位图则会隐藏
  effect: "fadeIn", // 载入使用何种效果
    // effect(特效),值有show(直接显示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
  threshold: 200, // 提前开始加载
    // threshold,值为数字,代表页面高度.如设置为200,表示滚动条在离目标位置还有200的高度时就开始加载图片,可以做到不让用户察觉
  event: 'click',  // 事件触发时才加载
    // event,值有click(点击),mouseover(鼠标划过),sporty(运动的),foobar(…).可以实现鼠标莫过或点击图片才开始加载,后两个值未测试…
  container: $("#container"),  // 对某容器中的图片实现效果
    // container,值为某容器.lazyload默认在拉动浏览器滚动条时生效,这个参数可以让你在拉动某DIV的滚动条时依次加载其中的图片
  failurelimit : 10 // 图片排序混乱时
     // failurelimit,值为数字.lazyload默认在找到第一张不在可见区域的图片时则不再继续加载,但当HTML容器混乱的时候可能出现可见区域内图片并没加载出来的情况,failurelimit意在加载N张可见区域外的图片,以避免出现这个问题.
});
</script>

本文做为一次简单的记录我为我的个人博客制作图片jQuery.lazyload懒加载的一个过程,如果有缘看到,希望能搞帮到各位兄台。

- END -

相关文章

评论

    不发表一下观点,这个评论功能拿来做什么?
    • 全部评论(0
      还没有评论,快来抢沙发吧!

站点信息

  • 网站运行
  • 共有文章:76 篇
  • 标签管理标签云
  • 网站程序DedeCMS V5.7 SP2
  • 群二维码:扫描二维码,加入QQ群