图片懒加载插件实战

很多网站都会用到‘图片懒加载’这种方式对网站进行优化,即延迟加载图片或符合某些条件才开始加载图片。于是心血来潮,决定自己手动写一下’图片懒加载‘插件。
  • 使用这个技术有什么显著的优点?

比如一个页面中有很多图片,如淘宝首页等等,一个页面有100多的图片,如果一上来就发送这么多请求,页面加载就会很漫长,如果js文件都放在了文档的底部,恰巧页面的头部又依赖这个js文件,那就不好办了。用户感觉这个页面就会很卡。

  • 懒加载原理:浏览器会自动对页面中的img标签的src属性发送请求并下载图片。通过动态改变img的src属性实现。

当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成loading图片地址(这样就只需请求一次)

等到一定条件(这里是页面滚动到一定区域),用实际存放img地址的laze-load属性的值去替换src属性,即可实现’懒加载’。

//即使img的src值为空,浏览器也会对服务器发送请求。所以平时做项目的时候,如果img没有用到src,就不要出现src这个属性

  • 先上三个重要的知识点
1.获取屏幕可视窗口大小:
document.documentElement.clientHeight 标准浏览器及低版本IE标准模式
document.body.clientHeight 低版本混杂模式
2.元素相对于文档document顶部

element.offsetTop

3.滚动条滚动的距离

document.documentElement.scrollTop   兼容ie低版本的标准模式

document.body.scrollTop 兼容混杂模式;

滚动加载:当图片出现在可视区域时,动态加载该图片。
原理:当图片元素顶部是否在可视区域内,(图片相对于文档document顶部-滚动条滚动的距离)
实现原理:
1.首先从所有相关元素中找出需要延时加载的元素,放在element_obj数组中。

2.判断数组中的img对象,若满足条件,则改变src属性

3.滚动的时候触发事件,1000毫秒后执行lazy()方法。

整部分代码位于闭包自执行函数中。相应的方法放在init中。

使用格式 :src填默认loading图片地址,真实的图片地址填在lazy-src属性里,切记需指定宽高。在外部调用  lazyLoad.init();

 全部的代码以及例子已经上传到github上了,地址是:https://github.com/beidan/lazeLoadImg,欢迎star。

打赏支持我写出更多好文章,谢谢!

打赏作者

打赏支持我写出更多好文章,谢谢!

任选一种支付方式

3 11 收藏 评论

关于作者:陈被单

热爱前端,欢迎交流 个人主页 · 我的文章 · 19 ·   

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部