发布于2021-03-13 18:49 阅读(827) 评论(0) 点赞(2) 收藏(4)
前端技术发展至今,我们对性能的追求不断提升,不断变化的是技术,但我们对用户体验的极致追求却始终如一。
所有前端(特别是soe除了类)都会因图片的加载而发愁,图片作为巨大的请求信息类,用时巨大。
那我们该如何处理呢?
这就涉及到了图片懒加载 所谓懒加载其实就是一种视觉欺骗
我们先去掉所有图片的src 将其改成 data-src
<img data-src = "images/case/Exhibition.png"/>
因为没有src属性存在 页面就不会发送异步请求图片 那么就得到了性能提升,很多人就会说了 那图片就没了啊 别急
js代码如下
function imgonload(){
//maximum接收当前页面的 可见高度+滚动高度
var maximum = document.documentElement.scrollTop + window.innerHeight;
//minimum 接收当前的滚动高度
var minimum = document.documentElement.scrollTop;
//获取所有的图片
var img = document.querySelectorAll("img");
//循环图片集合
for(var i = 0;i < img.length;i++){
//如果当前图片没用src值
if(!img[i].getAttribute("src")){
//如果当前图片和屏幕顶部的距离 大于滚动高度且小于滚动高度
if(img[i].getBoundingClientRect().top >= minimum && img[i].getBoundingClientRect().top <= maximum){
//如果当前网址不是传统IE内核
if(IEVersion() === "edge"||IEVersion() === 11||IEVersion() === -1){
//取出dataset.src成为图片的src属性
img[i].setAttribute("src",img[i].dataset.src)
//否则就是传统的IE内核
}else{
//如果当前图片有data-src属性
if(img[i].getAttribute("data-src")){
//将data-src属性负成图片的src值
img[i].setAttribute("src",img[i].getAttribute("data-src"))
}
}
}
}
}
}
然后呢,我们可用在js执行的最开始 和 滚动事件触发时执行这个方法
//滚动事件
document.onscroll = function(e){
//滚动条时触发图片懒加载
imgonload();
}
//最开始加载
imgonload();
原文链接:https://blog.csdn.net/weixin_45966674/article/details/114677467
作者:大哥你来啦
链接:http://www.qianduanheidong.com/blog/article/35674/88d233cc50825ba1f12f/
来源:前端黑洞网
任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任
昵称:
评论内容:(最多支持255个字符)
---无人问津也好,技不如人也罢,你都要试着安静下来,去做自己该做的事,而不是让内心的烦躁、焦虑,坏掉你本来就不多的热情和定力
Copyright © 2018-2021 前端黑洞网 All Rights Reserved 版权所有,并保留所有权利。 京ICP备18063182号-3
投诉与举报,广告合作请联系vgs_info@163.com或QQ3083709327
免责声明:网站文章均由用户上传,仅供读者学习交流使用,禁止用做商业用途。若文章涉及色情,反动,侵权等违法信息,请向我们举报,一经核实我们会立即删除!