JavaScript图片懒加载的优化方法详解

目录
  • 一、方法一
  • 二、方法二 InterSectionObserver
  • 总结

一、方法一

重点：

1.getBoundingClientRect().top > window.innerHeight 图片未出现

2.getBoundingClientRect().top < window.innerHeight 图片出现了

HTML：

<ul>
    ......
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    <li>2222222222</li>
    /*先用data-自定义标签，使图片先不加载*/
    <img data-src="./img1.jpg" height="200px"><br>
    <img data-src="./img2.jpg" height="200px" alt=""><br>
    <img data-src="./img3.jpg" height="200px" alt="">
</ul>

JavaScript:

let img = document.querySelectorAll('img')
window.addEventListener('scroll',() => {
	img.forEach((item) => {
		//若图片顶部高度小于视窗高度
		if(item.getBoundingClientRect().top < window.innerHeight) {
			const data_src = item.getAttribute('data-src')
			//则将自定义属性data-src赋值给src属性
			item.setAttribute("src",data_src)
		}
	})
	console.log("scroll触发了");  //此方法：若加载很多内容，就会导致任务的堆积，影响整体效率
})

我们可以看到，虽然图片懒加载已经成功了，但是scroll事件仍在不断触发，非常消耗资源，因此目前最推荐使用的方法还是IntersectionObserver

二、方法二 InterSectionObserver

重点：

1.observer.observe(DOM节点) 观察哪个DOM节点

2.observer.unobserve(DOM节点) 取消观察某DOM节点

3.callback目标能看见触发一次；目标元素看不见了又触发一次

HTML如上

JavaScript:

let img = document.querySelectorAll('img')
//此回调：目标能看见触发一次；目标元素看不见了又触发一次
const callback = (entries) => {   //接收一个数组作为参数，数组每一项都和目标元素相关，比如		isIntersecting判断目标元素是否被观察到了，又比如target属性代表该目标元素
    entries.forEach((item) => {
        //若该目标元素被观察到了
        if(item.isIntersecting) {
            const img = item.target //目标元素
            const data_src = img.getAttribute('data-src')
            img.setAttribute('src',data_src)
            observer.unobserve(img)  //observer.unobserve(DOM节点)  取消观察某DOM节点
        }
        console.log('触发');
    })
}
const observer = new IntersectionObserver(callback)
//遍历所有img，使得所有img被观察
img.forEach((item) => {
    observer.observe(item)  //observer.observe(DOM节点)  观察哪个DOM节点
})

思路：

new一个观察实例，并通过观察实例身上的observe属性观察每一个图片。定义callback回调函数，设置 目标图片出现时改变属性

此时我们看到，当所有图片都懒加载完之后(observe取消观察DOM节点)，scroll事件就不再触发*

总结

本篇文章就到这里了，希望能够给你带来帮助，也希望您能够多多关注我们的更多内容!   。

赞 (0)

相关推荐

  • 原生JS实现图片懒加载之页面性能优化

    在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再加载更多的图片.这种加载图片的方式叫做图片懒加载,又叫做按需加载或图片的延时加载.这样做的好处是:1.可以加快页面首屏渲染的速度:2.节约用户的流量. 一.实现思路 1.图片img标签自定义一个属性data-src来存放真实的地址. 2.当滚动页面时,检查所有的img标签,判断是否出现在事业中,如果

  • JS实现页面数据懒加载

    页面数据懒加载.Div移动到可视区域再去ajax加载内容. 最近有需求做页面的多个table用于加载数据,但是用户浏览页面的时候不需要一次将页面所有的东西加载出来,比如页面上3个table就占满了,用户点进去第一眼也就只能看到3个.为了防止一次加载拖慢了页面的速度,所以之后的table我们要懒加载.即该table移动到了可视区域再去异步请求加载数据. 以下为目前实现的方法: <!-- page lazyloading --> <script> $(function(){ // 设置

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

  • JavaScript懒加载详解

    JavaScript懒加载详解

    目录 懒加载 CSS样式: HTML部分: script部分 : 总结 懒加载 顾名思义比较懒,不想全部加载出来,当用户什么时候想看我在加载后面的东西 概括:懒加载其实就是延时加载,即当对象需要用到的时候再去加载. 实现原理: 首先你要有很多个第一张用来加载的图片,加载完毕之后显示后面所需的图片 步骤实现: 1.加载load图片 2.判断哪些图片要加载 3.隐形加载图片 4.替换真图片 CSS样式: <style> img { width: 400px; height: 300px; disp

  • JavaScript图片懒加载的优化方法详解

    JavaScript图片懒加载的优化方法详解

    目录 一.方法一 二.方法二 InterSectionObserver 总结 一.方法一 重点: 1.getBoundingClientRect().top > window.innerHeight 图片未出现 2.getBoundingClientRect().top < window.innerHeight 图片出现了 HTML: <ul> ...... <li>2222222222</li> <li>2222222222</li>

  • 图片懒加载imgLazyLoading.js使用详解

    本文主要介绍web前端使用图片懒加载imgLazyLoading ,供大家参考,具体内容如下 1.html代码 //懒加载对象目标代码 <img originalSrc="__PUBLIC__/images/home/icon_pingtuan.png"> //引用本地js <script src="__PUBLIC__/js/imgLazyLoading.min.js"></script> <script src=&quo

  • Python实现从文件中加载数据的方法详解

    Python实现从文件中加载数据的方法详解

    前几篇都是手动录入或随机函数产生的数据.实际有许多类型的文件,以及许多方法,用它们从文件中提取数据来图形化. 比如之前python基础(12)介绍打开文件的方式,可直接读取文件中的数据,扩大了我们的数据来源.下面,将展示几种方法. 我们将使用内置的 csv 模块加载CSV文件 CSV文件是一种特殊的文本文件,文件中的数据以逗号作为分隔符,很适合进行数据的解析.先用excle建立如下表格和数据,另存为csv格式文件,放到代码目录下. 包含在Python标准库中自带CSV 模块,我们只需要impor

  • Javascript实现图片懒加载插件的方法

    前言 网络上各大论坛,尤其是一些图片类型的网站上,在图片加载时均采用了一种名为懒加载的方式,具体表现为,当页面被请求时,只加载可视区域的图片,其它部分的图片则不加载,只有这些图片出现在可视区域时才会动态加载这些图片,从而节约了网络带宽和提高了初次加载的速度,具体实现的技术并不复杂,下面分别对其说明. Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制. 这里需要注意的是: img在初

  • vue-router路由懒加载和权限控制详解

    vue-router路由懒加载 和权限控制,今天刚好搞了一个基于node token验证的小demo 所以下面介绍下,路由懒加载 1.为什么要使用路由懒加载呢 用vue.js写单页面应用时,会出现打包后的JavaScript包非常大,影响页面加载,我们可以利用路由的懒加载去优化这个问题,当我们用到某个路由后,才去加载对应的组件,这样就会更加高效 2.用法 import Vue from 'vue' import Router from 'vue-router' Vue.use(Router) e

  • 解析javascript图片懒加载与预加载的分析总结

    本篇文章主要介绍了懒加载和预加载两种技术的解析,废话不多说,一起来看吧. 懒加载也叫延迟加载:前一篇文章有介绍:JS图片延迟加载 延迟加载图片或符合某些条件时才加载某些图片. 预加载:提前加载图片,当用户需要查看时可直接从本地缓存中渲染. 两种技术的本质:两者的行为是相反的,一个是提前加载,一个是迟缓甚至不加载.懒加载对服务器前端有一定的缓解压力作用,预加载则会增加服务器前端压力. 懒加载的意义及实现方式有: 意义: 懒加载的主要目的是作为服务器前端的优化,减少请求数或延迟请求数. 实现方式:

  • Android开发实现ListView异步加载数据的方法详解

    Android开发实现ListView异步加载数据的方法详解

    本文实例讲述了Android开发实现ListView异步加载数据的方法.分享给大家供大家参考,具体如下: 1.主Activity public class MainActivity extends Activity { private ListView listView; private ArrayList<Person> persons; private ListAdapter adapter; private Handler handler=null; //xml文件的网络地址 final

  • PHP中的自动加载操作实现方法详解

    本文实例讲述了PHP中的自动加载操作实现方法.分享给大家供大家参考,具体如下: what is 自动加载? 或许你已经对自动加载有所了解.简单描述一下:自动加载就是我们在new一个class的时候,不需要手动去写require来导入这个class.php文件,程序自动帮我们加载导入进来.这是php5.1.2(好像是)版本新加入一个功能,他解放了程序员的双手,不需要手动写那么多的require,变得有那么点智能的感觉. 自动加载可以说是现代PHP框架的根基,任何牛逼的框架或者架构都会用到它,它发明

  • Element Plus的el-tree-select组件懒加载+数据回显详解

    目录 一.背景说明 二.使用 1. dom 2.methods 三.回显 总结 一.背景说明 技术:Vue3 + Element Plus 需求:在选择组织机构时以树结构下拉展示. 用到组件:TreeSelect 树形选择组件(el-tree-select) 官网文档地址: https://element-plus.gitee.io/zh-CN/component/tree-select.html https://element-plus.gitee.io/zh-CN/component/tre

  • 微信小程序分包加载代码实现方法详解

    微信小程序分包加载代码实现方法详解

    直接在 "app.json" 中贴入代码 { "pages": [ "pages/Login/xxxx", ], "subpackages":[{ // 这里就是贴入的代码 root值可以任意改 pages同上 "root":"packageA", "pages":[ "pages/Login/bbb", "pages/Login/ccc

随机推荐