原生js之图片懒加载实现

目录

目录 (1)

1. 什么是图片懒加载 (1)

2. 为什么要使用图片懒加载 (1)

3. 图片懒加载实现方式 (2)

1. 先准备些图片标签 (2)

2. 默认处于可视化区域内的图片先显示出来 (2)

3. 给window加一个滚动事件 (3)

4. 给img设置透明和过渡 (3)

5. 完整代码 (4)

1.什么是图片懒加载

我们知道了浏览器加载img是很耗费资源的，还有带宽，而且还有一个特点就是如果没有设置img的src属性，就不会消耗这些资源。

所以图片懒加载就是默认先不设置img的src属性，而是等需要显示这张图片时再去设置其src将其显示出来，这就是图片懒加载。

2.为什么要使用图片懒加载

优化性能

3.图片懒加载实现方式

1. 先准备些图片标签

2. 默认处于可视化区域内的图片先显示出来

var imgs = document.querySelectorAll("img");

function init() {

for (let i = 0; i < imgs.length; i++) {

var img = imgs[i];

if (img.offsetTop < window.innerHeight) { //表示默认在可视化容器内img.src = img.getAttribute("asrc");

img.style.opacity="1";

}

}

}

init();

3. 给window加一个滚动事件

然后给window加一个滚动事件，在事件里面通过循环获取哪些即将显示在可视化容器里面的元素，当其即将显示时就给他设置src 的值。【滚出来了就显示】

window.onscroll = function () {

for (let i = 0; i < imgs.length; i++) {

var img = imgs[i];

if (img.offsetTop - window.scrollY <= window.innerHeight) {

img.src = img.getAttribute("asrc");

img.style.opacity="1";

}

}

}

4. 给img设置透明和过渡

为了效果更好看点，可以默认把所有的图片全部设置为透明opacity:0，然后等要显示了就设置为opacity:1,同时加上过渡属性transition: 2s;这样显示时还会有特殊的效果。

5. 完整代码