摘要:原文链接延迟加载也称为惰性加载,即在长网页中延迟加载图像。传入一个回调函数,当其观察到元素集合出现时候,则会执行该函数。管理的是一个数组,当元素出现或消失的时候,数组添加或删除该元素,并且执行该回调函数。
原文链接 - https://zhuanlan.zhihu.com/p/25455672
延迟加载也称为惰性加载,即在长网页中延迟加载图像。
用户滚动到它们之前,视口外的图像不会加载。
这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快。
在某些情况下,它还可以帮助减少服务器负载。
延迟加载的优点:
方法一</>复制代码
提升用户的体验,如果图片数量较大,打开页面的时候要将将页面上所有的图片全部获取加载,很可能会出现卡顿现象,影响用户体验。因此,有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担。
将页面上所有图片的src属性设置为loading.gif,而图片的真实路径则设置在data-src属性中。
当页面滚动的时候计算图片位置和滚动的位置,当图片出现在浏览器视口内时,将图片的src属性设置为data-src的值。
</>复制代码
</>复制代码
img { display: block; margin-bottom: 50px; }
</>复制代码
function lazyload() {
var images = document.getElementsByTagName("img");
var n = 0; // 用于存储图片加载到的位置,避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < images.length; i++) {
if (images[i].offsetTop < seeHeight + scrollTop) {
if (images[i].getAttribute("src") === "loading.png") {
images[i].src = images[i].getAttribute("data-src");
}
n = n + 1;
}
}
}
}
lazyload(); //初始化首页的页面图片
window.addEventListener("scroll", lazyload(), false);
方法二
上面的方法虽然没什么问题,但是性能较差,因为当页面滚动时,scroll事件会高频触发,这非常影响浏览器性能。
所以,这里要对lazyload函数进行函数节流(throttle)与函数去抖(debounce)处理。
函数节流(throttle)与函数去抖(debounce)
这里html和css代码不变,经过throttle处理的js代码如下:
</>复制代码
function throttle (fn, delay, atleast) {
var timeout = null,
startTime = new Date();
return function () {
var curTime = new Date();
clearTimeout(timeout);
if (curTime - startTime >= atleast) {
fn ();
startTime = curTime;
} else {
timeout = setTimeout (fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName("img"),
n = 0; //存储图片加载到的位置,避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < images.length; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute("src") === "loading.png") {
images[i].src = images[i].getAttribute("data-src");
}
n = n + 1;
}
}
}
}
lazyload(); //初始化首页的页面图片
window.addEventListener("scroll", throttle(lazyload(), 500, 1000), false);
方法三
目前有一个新的 IntersectionObserver API,可以自动"观察"元素是否可见。
IntersectionObserver API 使用教程
用这种方法实现代码非常简洁,但是许多浏览器不支持。
IntersectionObserver 传入一个回调函数,当其观察到元素集合出现时候,则会执行该函数。
io.observe 即要观察的元素,要一个个添加才可以。
io 管理的是一个数组,当元素出现或消失的时候,数组添加或删除该元素,并且执行该回调函数。
</>复制代码
function query(selector) {
return Array.from(document.querySelectorAll(selector));
}
var io = new IntersectionObserver(function(items) {
items.forEach(function(item) {
var target = item.target;
if(target.getAttribute("src") == "loading.png") {
target.src = target.getAttribute("data-src");
}
})
});
query("img").forEach(function(item) {
io.observe(item);
});
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/88152.html
摘要:懒加载的意义这里懒的意思可以理解为延迟,如淘宝京东这些电商平台有大量的图片,如果上来就加载服务器表示压力山大,所以就想出了懒加载这种克敌之法,用户滚动到的区域才发送请求加载内容原理将页面中的标签指向一张小照片或者为空都可以,然后写一个自定义 懒加载的意义 这里‘懒’的意思可以理解为延迟,如淘宝、京东这些电商平台有大量的图片,如果上来就加载服务器表示压力山大,所以就想出了懒加载这种克敌之...
摘要:接下来,我们需要利用对这些暂时看不见的图片元素进行观察,当确认他们滚动到了窗体的可视区域时,我们在回调函数中对其进行加载。创建一个,配置元素和回调函数触发机制,这里我们将这个设为。 点击查看视频教程哦!!!! intersection Observer简介 点击查阅MDN关于此api的使用说明 这个api是用来检测dom元素交集的,常见的应用场景之一就是本文提到的对图片进行懒加载,即:...
摘要:最近面试了几家公司,他们不约而同都问到了这个问题了解吗其实是对图片的一种延迟加载技术,直到用户滚动图片出现在用户可视范围时才把它加载出来。我在上亲身实践了一下,然而发现,总是返回,其他两种方法都正常获取到了值。 最近面试了几家公司,他们不约而同都问到了这个问题:了解 Lazy Load 吗? Lazy Load is delays loading of images in long ...
摘要:当页面图片很多时,页面的加载速度缓慢,几钟内页面没有加载完成,也许会失去很多的用户。指向一张默认的图片,否则当为空时也会向服务器发送一次请求。这样便实现了懒加载。我想实现限制触发频率,来优化性能。 本文标题:实现图片懒加载(lazyload)文章作者:Jake发布时间:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始链接:http://i....
摘要:当页面图片很多时,页面的加载速度缓慢,几钟内页面没有加载完成,也许会失去很多的用户。指向一张默认的图片,否则当为空时也会向服务器发送一次请求。这样便实现了懒加载。我想实现限制触发频率,来优化性能。 本文标题:实现图片懒加载(lazyload)文章作者:Jake发布时间:2016-11-26, 18:46:34最后更新:2016-11-28, 17:12:59原始链接:http://i....
阅读 2190·2021-11-19 09:55
阅读 2647·2021-11-11 16:55
阅读 3181·2021-09-28 09:36
阅读 1948·2021-09-22 16:05
阅读 3280·2019-08-30 15:53
阅读 1811·2019-08-30 15:44
阅读 2902·2019-08-29 13:10
阅读 1345·2019-08-29 12:30
极致性价比!云服务器续费无忧!
Tesla A100/A800、Tesla V100S等多种GPU云主机特惠2折起,不限台数,续费同价。
NVIDIA RTX 40系,高性价比推理显卡,满足AI应用场景需要。
乌兰察布+上海青浦,满足东推西训AI场景需要