文件名称:图片延迟加载
文件大小:567B
文件格式:JS
更新时间:2020-01-11 11:02:49
延迟加载 jq 前端
注:我写的这个方法,实现的效果是当图片的上边框显示在可视区域内时,把图片的真实路径赋值给src。
如果需要让图片全部显示在可视区域时再换成真实src的话,需要把if判断中的条件换成 $off + $height - $scroll < clientH
首先给需要延迟加载的img标签加个class名lazy,然后把src的路径赋值给data-original,如下所示:
然后引入jq文件,然后再把上边的js代码放上即可
思路:1、首先给所有需要延迟加载的图片,添加一个默认的图片(2.jpg),让页面刚开始加载时只加载一张图片
2、当图片显示在可视区域时,把data-original的值赋给src属性
3、首页刚进入页面时有些图片就显示在可视区域内 所以要首先执行下show方法。然后再让滚轴滚动时再执行show方法