威尼斯888_www.wns888.com_威尼斯wns888官网
做最好的网站
威尼斯888 > 计算机网络 / Web前端 > 此类页面需要用到很多图片

原标题:此类页面需要用到很多图片

浏览次数:89 时间:2020-04-22

在我们做项目过程中,可能会遇到图片多、加载慢,以及设计很花哨的页面,比如产品展示、专题活动。此类页面需要用到很多图片,页面长,这样的页面未做处理的话,在浏览器打开的时候往往会很卡,性能比较差,因为一次性需要加载很多图片,如果不解决这个问题,产品那边很难通过,严重影响了用户体验。为了解决这个问题,我也搜索了一些方法,发现有一款插件可以专门解决图片延迟加载问题。

插件名:jQuery.lazyload,下载压缩包,请猛戳这里:点击下载

解压压缩包,我们可以引用jquery和jquery.lazyload.js到你的页面,如下:

html图片调用方法

为图片加入样式lazy 图片路径引用方法用data-original,代码如下:

  • 图片 1
  • 图片 2
  • 图片 3
  • 图片 4
  • 图片 5
  • 图片 6

JS函数调用

 $ { $.lazyload({effect: "fadeIn"}); }); 

在图片中也可以不使用class="lazy",初始化时使用:

$.lazyload({effect: "fadeIn"});

这样会对页面上所有图片都会起作用,我们可以看情况来设定。

如果想提载入图片,可以使用 threshold 进行设置,如下:

$.lazyload;

以上实例的含义是:在图片距离屏幕180px时提前载入。

短短的几行代码就可以提升我们页面的性能,从而提高用户体验。了解完上面的使用方法,我们可以看下案例,请猛戳:DEMO

还有一点差点忘记了,这个插件的兼容问题,它目前基本兼容主流浏览器:

总结

上面只是jQuery.lazyload的应用,其原理后面会再抽时间分析下。并且这个插件只是针对图片,以后有时间可以探讨下数据延时加载的知识以及瀑布流的插件。

缺点:在jQuery动画页面应用中,比如偏复杂的opacity动画、视觉差动画,本人测试过,不太适合。

如果你有好的方法,可以一起探讨。

本文由威尼斯888发布于计算机网络 / Web前端,转载请注明出处:此类页面需要用到很多图片

关键词:

上一篇:6的滚动翻页方式已经扩展到许多地方

下一篇:没有了