懒加载实现的方法有哪些?(三种方法介绍)-技术精选-玖叶教程网

本篇文章给大家带来的内容是关于懒加载实现的方法有哪些？（三种方法介绍），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

优势

性能收益：浏览器加载图片、decode、渲染都需要耗费资源，懒加载能节约性能消耗，缩短onload事件时间。
节约带宽：这个不需要解释。

通常，我们在html中展示图片，会有两种方式：

img 标签
css background-image

img的懒加载实现

img有两种方式实现懒加载：

事件监听(scroll、resize、orientationChange)

<!DOCTYPE html>

<head>

<title>event</title>

<style>

img {

background: #F1F1FA;

width: 400px;

height: 300px;

display: block;

margin: 10px auto;

border: 0;

}

</style>

</head>

<body>

document.addEventListener("DOMContentLoaded", function() {

var lazyloadImages = document.querySelectorAll("img.lazy");

var lazyloadThrottleTimeout;

function lazyload () {

if(lazyloadThrottleTimeout) {

clearTimeout(lazyloadThrottleTimeout);

}

lazyloadThrottleTimeout = setTimeout(function() {

var scrollTop = window.pageYOffset;

lazyloadImages.forEach(function(img) {

if(img.offsetTop < (window.innerHeight + scrollTop)) {

img.src = img.dataset.src;

img.classList.remove('lazy');

}

});

if(lazyloadImages.length == 0) {

document.removeEventListener("scroll", lazyload);

window.removeEventListener("resize", lazyload);

window.removeEventListener("orientationChange", lazyload);

}

}, 20);

}

document.addEventListener("scroll", lazyload);

window.addEventListener("resize", lazyload);

window.addEventListener("orientationChange", lazyload);

});

</script>

</body>

</html>

Intersection Observer（兼容性问题）

<!DOCTYPE html>

<head>

<title>observer</title>

<style>

img {

background: #F1F1FA;

width: 400px;

height: 300px;

display: block;

margin: 10px auto;

border: 0;

}

</style>

</head>

<body>

document.addEventListener("DOMContentLoaded", function() {

var lazyloadImages = document.querySelectorAll(".lazy");

var imageObserver = new IntersectionObserver(function(entries, observer) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

var image = entry.target;

image.src = image.dataset.src;

image.classList.remove("lazy");

imageObserver.unobserve(image);

}

});

lazyloadImages.forEach(function(image) {

imageObserver.observe(image);

});

</script>

</body>

</html>

background-image的实现

background-image的实现跟img的原理基本是一样的，区别是在对class的处理上：

<!DOCTYPE html>

<head>

<title>background</title>

<style>

body {

margin: 0;

}

.bg {

height: 200px;

}

#bg-image.lazy {

background-image: none;

background-color: #F1F1FA;

}

#bg-image {

background-image: url("https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300");

background-size: 100%;

}

</style>

</head>

<body>

document.addEventListener("DOMContentLoaded", function() {

var lazyloadImages = document.querySelectorAll(".lazy");

var imageObserver = new IntersectionObserver(function(entries, observer) {

entries.forEach(function(entry) {

if (entry.isIntersecting) {

var image = entry.target;

image.classList.remove("lazy");

imageObserver.unobserve(image);

}

});

lazyloadImages.forEach(function(image) {

imageObserver.observe(image);

});

</script>

</body>

</html>

渐进式懒加载

渐进式懒加载，指的是存在降级处理，通常html形式如下：

</a>

这样的代码会有2个好处：

如果js执行失败，可以点击预览
大小与实际图一致的占位data URI，避免reflow

最终的代码如下：

<!DOCTYPE html>

<head>

<title>progressive</title>

<style>

a.progressive {

position: relative;

display: block;

overflow: hidden;

outline: none;

}

a.progressive:not(.replace) {

cursor: default;

}

a.progressive img {

display: block;

width: 100%;

max-width: none;

height: auto;

border: 0 none;

}

a.progressive img.preview {

filter: blur(2vw);

transform: scale(1.05);

}

a.progressive img.reveal {

position: absolute;

left: 0;

top: 0;

will-change: transform, opacity;

animation: reveal 1s ease-out;

}

@keyframes reveal {

0% {transform: scale(1.05); opacity: 0;}

100% {transform: scale(1); opacity: 1;}

}

</style>

</head>

<body>

</a>

</a>

</a>

</a>

</a>

window.addEventListener('load', function() {

var pItem = document.getElementsByClassName('progressive replace'), timer;

window.addEventListener('scroll', scroller, false);

window.addEventListener('resize', scroller, false);

inView();

function scroller(e) {

timer = timer || setTimeout(function() {

timer = null;

requestAnimationFrame(inView);

}, 300);

}

function inView() {

var scrollTop = window.pageYOffset;

var innerHeight = window.innerHeight;

var p = 0;

while (p < pItem.length) {

var offsetTop = pItem[p].offsetTop;

if (offsetTop < (scrollTop + innerHeight)) {

loadFullImage(pItem[p]);

pItem[p].classList.remove('replace');

}

else p++;

}

function loadFullImage(item) {

var img = new Image();

if (item.dataset) {

img.srcset = item.dataset.srcset || '';

img.sizes = item.dataset.sizes || '';

}

img.src = item.href;

img.className = 'reveal';

if (img.complete) addImg();

else img.onload = addImg;

function addImg() {

item.addEventListener('click', function(e) { e.preventDefault(); }, false);

item.appendChild(img).addEventListener('animationend', function(e) {

var pImg = item.querySelector('img.preview');

if (pImg) {

e.target.alt = pImg.alt || '';

item.removeChild(pImg);

e.target.classList.remove('reveal');

}

});

}

}, false);

</script>

</body>

</html>

现成库

推荐下面这个库，使用非常简单：https://www.npmjs.com/package/lozad

以上就是懒加载实现的方法有哪些？（三种方法介绍）的详细内容，更多请关注其它相关文章！

更多技巧请《转发 + 关注》哦！

玖叶教程网

前端编程开发入门

懒加载实现的方法有哪些?(三种方法介绍)