脚本宝典收集整理的这篇文章主要介绍了图片懒加载,脚本宝典觉得挺不错的,现在分享给大家,也给大家做个参考。
[TOC]
图片懒加载
什么是懒加载
懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时加载过多资源。
解决方案
<img class="J_imgLazyload" src="//img14.360buyimg.COM/CMS/g10/M00/13/04/rBEQWFFj4PUIAAAAAAAESxyqJLUAADVDaiHC9oAAARj186.gif" data-url="//img11.360buyimg.com/cms/jfs/t12118/41/1394617476/43413/2253395a/5a1f7569N63f38100.jpg" />
src
先放一张占位图, 待该元素出现在"视口", 将src
替换成data-url
的值.
优化
函数节流
//滚动执行
VAR timer = 0;
$(window).on("scroll", function () {
clearTimeout(timer);
setTimeout(function () {
loading();
},150)
});
如何判断元素是否在可视区域
方法一
// post 距离屏幕顶端的 距离
var post = $('img').offset().top - $(window).scrollTop();
// posb 距离屏幕顶端的距离 + 自身的高度
var posb = post + o.height();
// 屏幕高度
var contHeight= $(window).height();
if ((post >= 0 && post < contHeight) || (posb > 0 && posb <= contHeight)) {
// 在当前屏幕内
}else{
// 不在当前屏幕内
}
方法二
getBoundingClientRect()
var rectObject = object.getBoundingClientRect();
这个方法返回一个名为ClientRect
的DOMRect
对象,包含了top
、right
、botton
、left
、width
、height
这些值。
可以看出返回的元素位置是相对于左上角而言的,而不是边距。
我们思考一下,什么情况下图片进入可视区域。
假设const bound = el.getBoundingClientRect();
来表示图片到可视区域顶部距离;
并设 const clientHeight = window.innerHeight;
来表示可视区域的高度。
随着滚动条的向下滚动,bound.top
会越来越小,也就是图片到可视区域顶部的距离越来越小,当bound.top===clientHeight
时,图片的上沿应该是位于可视区域下沿的位置的临界点,再滚动一点点,图片就会进入可视区域
function isInSight(el) {
const bound = el.getBoundingClientRect();
const clientHeight = window.innerHeight;
//如果只考虑向下滚动加载
//const clientWidth = window.innerWeight;
return bound.top <= clientHeight + 100; // +100 预加载
}
方法三
IntersectionObserver
— 交叉观察器"
const io = new IntersectionObserver(ioes => {
console.log(ioes);
ioes.forEach(ioe => {
const el = ioe.target;
// intersectionRatio 目标元素的可见比例
const intersectionRatio = ioe.intersectionRatio;
if (intersectionRatio > 0 && intersectionRatio)
{
// 出现在视口
io.unobserve(el);
}
});
});
io.observe($('img')[4]);
var options = {
root: null, //如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root。
rootMargin: '0px',
threshold: 1.0
}
var callback = function(entries, observer) {
/* Content excerpted, show below */
console.log(11111)
};
var observer = new IntersectionObserver(callback, options);
// 开始观察
io.observe(document.getElementById('example'));
// 停止观察
io.unobserve(element);
// 关闭观察器
io.disconnect();
IntersectionObserver
是浏览器原生提供的构造函数,接受两个参数:callback
是可见性变化时的回调函数,option
是配置对象(该参数可选)。
callback函数有2个参数;
- 参数一: entries .
A list of IntersectionObserverEntry
objects(IntersectionObserverEntry对象的列表). 内容如下
属性
描述
time
可见性发生变化的时间,单位为毫秒
rootBounds
与getBoundingClientRect()方法的返回值一样
boundingClientRect
目标元素的矩形区域的信息
intersectionRect
目标元素与视口(或根元素)的交叉区域的信息
intersectionRatio
目标元素的可见比例,即intersectionRect占boundingClientRect的比例,完全可见时为1,完全不可见时小于等于0
target
被观察的目标元素,是一个 DOM 节点对象
- 参数2— observer
root
如果root参数指定为null或者不指定的时候默认使用浏览器视口做为root。
rootMargin
root元素的外边距。类似于css中的 margin 属性,比如 "10px 20px 30px 40px"
(top, right, bottom, left)。如果有指定root参数,则rootMargin也可以使用百分比来取值。该属性值是用作root元素和target发生交集时候的计算交集的区域范围,使用该属性可以控制root元素每一边的收缩或者扩张。默认值为0。
threshold
可以是单一的number也可以是number数组,target元素和root元素相交程度达到该值的时候IntersectionObserver注册的回调函数将会被执行。如果你只是想要探测当target元素的在root元素中的可见性超过50%的时候,你可以指定该属性值为0.5。如果你想要target元素在root元素的可见程度每多25%就执行一次回调,那么你可以指定一个数组[0, 0.25, 0.5, 0.75, 1]。默认值是0(意味着只要有一个target像素出现在root元素中,回调函数将会被执行)。该值为1.0含义是当target完全出现在root元素中时候 回调才会被执行。
兼容性
WICG 提供了一个 polyfill
✔
✔
6+
✔
7+
✔
注意点
IntersectionObserver API
是异步的,不随着目标元素的滚动同步触发。
规格写明,IntersectionObserver
的实现,应该采用requestidleCallback()
,即只有线程空闲下来,才会执行观察器。这意味着,这个观察器的优先级非常低,只在其他任务执行完,浏览器有了空闲才会执行。
参考
以上是脚本宝典为你收集整理的图片懒加载全部内容,希望文章能够帮你解决图片懒加载所遇到的问题。
本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。