本站消息

站长简介/公众号


站长简介:高级软件工程师,曾在阿里云,每日优鲜从事全栈开发工作,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

 价值13000svip视频教程,前端大神匠心打造,零基础前端开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2021-03(364)

2021-04(182)

2021-05(181)

2021-06(95)

2021-07(12)

js实现图片的懒加载

发布于2021-03-13 18:49     阅读(238)     评论(0)     点赞(2)     收藏(4)


前端js实现页面图片懒加载

前端技术发展至今,我们对性能的追求不断提升,不断变化的是技术,但我们对用户体验的极致追求却始终如一。
所有前端(特别是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/

来源:前端黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

2 0
收藏该文
已收藏

评论内容:(最多支持255个字符)