对页面加载速度影响最大的就是图片,懒加载的意义2757com 原理 代码

懒加载的含义

目录:

JavaScript怎么样促成图片懒加载(lazyload卡塔尔(قطر‎ 提升顾客体验(巩固版卡塔尔(قطر‎,javascriptlazyload

目录:

  • 懒加载的含义(为何要使用懒加载)
  • 原理
  • 代码

在上篇小说给大家介绍了JavaScript完成图片懒加载(Lazyload卡塔尔(英语:State of Qatar),大家能够参照下。

懒加载的意思(为啥要接纳懒加载)

对页面加载速度影响最大的正是图形,一张普通的图纸能够实现几M的分寸,而代码大概就唯有几十KB。当页面图片超级多时,页面包车型客车加载速度迟滞,几S钟内页面未有加载成功,恐怕会错失多数的客商。

为此,对于图片过多的页面,为了加速页面加载速度,所以广大时候咱们需要将页面内未出今后可视区域内的图形先不做加载,
等到滚动到可视区域后再去加载。那典型对于页面加载质量上会有超大的进步,也增加了顾客体验。

原理

将页面中的img标签src指向一张小图片大概src为空,然后定义data-src(那些天性能够自定义命名,作者才用data-src)属性指向真实的图形。src指向一张默同志认的图样,不然当src为空时也会向服务器发送三回倡议。能够本着loading的地点。

注:图片要钦命宽高

<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" />

当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把客户就要看见的图形加载。那样便达成了懒加载。

代码

在写代码前,供给精通各样中度。先看那篇文章scrollTop,offsetTop,scrollLeft,offsetLeft

<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
img {
display: block;
margin-bottom: 50px;
width: 400px;
height: 400px;
}
</style>
</head>
<body>
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 1">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 2">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443Vb5-3.jpg" alt="2757com 3">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443Vb5-3.jpg" alt="2757com 4">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 5">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 6">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 7">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 8">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443Vb5-3.jpg" alt="2757com 9">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 10">
<img src="default.jpg" data-src="http://www.bkjia.com/uploads/allimg/161202/03443S162-0.jpg" alt="2757com 11">
</body>

JavaScript

<script>
var num = document.getElementsByTagName('img').length;
var img = document.getElementsByTagName("img");
var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
lazyload(); //页面载入完毕加载可是区域内的图片
window.onscroll = lazyload;
function lazyload() { //监听页面滚动事件
var seeHeight = document.documentElement.clientHeight; //可见区域高度
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
for (var i = n; i < num; i++) {
if (img[i].offsetTop < seeHeight + scrollTop) {
if (img[i].getAttribute("src") == "default.jpg") {
img[i].src = img[i].getAttribute("data-src");
}
n = i + 1;
}
}
}
</script>

jQuery

<script>
var n = 0,
imgNum = $("img").length,
img = $('img');
lazyload();
$(window).scroll(lazyload);
function lazyload(event) {
for (var i = n; i < imgNum; i++) {
if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
if (img.eq(i).attr("src") == "default.jpg") {
var src = img.eq(i).attr("data-src");
img.eq(i).attr("src", src);
n = i + 1;
}
}
}
}
</script>

运用节流函数实行性能优化

生机勃勃旦向来将函数绑定在scroll事件上,当页面滚动时,函数会被再三触发,那非常影响浏览器的性子。

自己想完毕节制触发频率,来优化品质。

节流函数:只同意三个函数在N秒内实行贰次。上面是一个轻松的节流函数:

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time 在time时间内必须执行一次
function throttle(fun, delay, time) {
var timeout,
startTime = new Date();
return function() {
var context = this,
args = arguments,
curTime = new Date();
clearTimeout(timeout);
// 如果达到了规定的触发时间间隔,触发 handler
if (curTime - startTime >= time) {
fun.apply(context, args);
startTime = curTime;
// 没达到触发间隔,重新设定定时器
} else {
timeout = setTimeout(fun, delay);
}
};
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

上述所述是小编给大家介绍的JavaScript怎样兑现图片懒加载(lazyload卡塔尔提升客商体验(加强版卡塔尔国,希望对大家享有利于,假诺大家有任何疑问请给笔者留言,笔者会及时复苏大家的。在这里也非常多谢大家对帮客之家网址的支撑!

卡塔尔(قطر‎进步客商体验(加强版卡塔尔(英语:State of Qatar),javascriptlazyload 目录:
懒加载的意思(为何要接纳懒加载) 原理 代码 在上篇…

  • 来源:前端怎样完成图片懒加载(lazyload卡塔尔国升高客户体验
  • 原版的书文地址:http://i.jakeyu.top/2015/1三分之一6/完成图片懒加载/
  • 作者:Jake

对页面加载速度影响最大的正是图形,一张普通的图样能够实现几M的深浅,而代码恐怕就唯有几十KB。当页面图片超级多时,页面包车型地铁加载速度迟滞,几S钟内页面未有加载成功,恐怕会错失非常多的顾客。

懒加载的含义 原理 代码


由此,对于图片过多的页面,为了加紧页面加载速度,所以重重时候咱们必要将页面内未出以往可视区域内的图形先不做加载,
等到滚动到可视区域后再去加载。那标准对于页面加载质量上会有不小的进步,也增加了客商体验。

在上篇小说给大家介绍了JavaScript完成图片懒加载,大家能够参见下。

懒加载的意义(为何要运用懒加载)

对页面加载速度影响最大的正是图表,一张普通的图样能够高达几M的尺寸,而代码只怕就唯有几十KB。当页面图片比较多时,页面包车型大巴加载速度放慢,几S钟内页面没有加载成功,或然会失掉超级多的顾客。

为此,对于图片过多的页面,为了加速页面加载速度,所以重重时候我们要求将页面内未出现在可视区域内的图片先不做加载,
等到滚动到可视区域后再去加载。那标准对于页面加载品质上会有异常的大的进级,也巩固了顾客体验。

原理

懒加载的意思

原理

将页面中的img标签src指向一张小图片恐怕src为空,然后定义data-src(那个性子可以自定义命名,小编才用data-src)属性指向真实的图纸。src指向一张默先生认的图形,不然当src为空时也会向服务器发送贰回号召。可以本着loading的地点。

注:图片要钦赐宽高

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />

当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把客户将在看到的图纸加载。这样便达成了懒加载。

将页面中的img标签src指向一张小图片或许src为空,然后定义data-src(那么些天性能够自定义命名,小编才用data-src)属性指向真实的图纸。

对页面加载速度影响最大的就是图形,一张普通的图样能够到达几M的大小,而代码大概就唯有几十KB。当页面图片相当多时,页面包车型客车加载速度缓慢,几S钟内页面没有加载成功,可能会错失繁多的客户。

代码

在写代码前,须要精通各类中度。先看那篇小说scrollTop,offsetTop,scrollLeft,offsetLeft

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>
<body>
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 12">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 13">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="2757com 14">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="2757com 15">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 16">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 17">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 18">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 19">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="2757com 20">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 21">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="2757com 22">
</body>

JavaScript

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
    lazyload(); //页面载入完毕加载可是区域内的图片
    window.onscroll = lazyload;
    function lazyload() { //监听页面滚动事件
        var seeHeight = document.documentElement.clientHeight; //可见区域高度
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") == "default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1;
            }
        }
    }
</script>

jQuery

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');
    lazyload();
    $(window).scroll(lazyload);
    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") == "default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);
                    n = i + 1;
                }
            }
        }
    }
</script>

当载入页面时,先把可视区域内的img标签的data-src属性值负给src,然后监听滚动事件,把顾客将在见到的图形加载。那样便达成了懒加载。

据此,对于图片过多的页面,为了加速页面加载速度,所以重重时候大家需求将页面内未出现在可视区域内的图形先不做加载,
等到滚动到可视区域后再去加载。那标准对于页面加载品质上会有异常的大的进级,也拉长了顾客体验。

选拔节流函数实行质量优化

假使一直将函数绑定在scroll事件上,当页面滚动时,函数会被再三触发,那不行影响浏览器的习性。

自家想实现约束触发频率,来优化质量。

节流函数:只同意一个函数在N秒内举行一回。上面是三个简单易行的节流函数:

// 简单的节流函数
//fun 要执行的函数
//delay 延迟
//time  在time时间内必须执行一次
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date();
    return function() {
        var context = this,
            args = arguments,
            curTime = new Date();
        clearTimeout(timeout);
        // 如果达到了规定的触发时间间隔,触发 handler
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // 没达到触发间隔,重新设定定时器
        } else {
            timeout = setTimeout(fun, delay);
        }
    };
};
// 实际想绑定在 scroll 事件上的 handler
function lazyload(event) {}
// 采用了节流函数
window.addEventListener('scroll',throttle(lazyload,500,1000));

本文完!

发表评论

电子邮件地址不会被公开。 必填项已用*标注

相关文章