JS原生实现图片懒加载

2024-04-07 09:25:47

重点集合

<div class="box"> <!-- 图片的src路径为空   lazyload="true"    data-original 值为真实的图片地址 --><img src=""  class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg"></div>

<script type="text/javascript">window.onload = function () {//获取当前浏览器的视口高度var viewHeight = document.documentElement.clientHeight;console.log(viewHeight)//鼠标滚动回调function lazyload() {var img = document.getElementsByClassName('img'); //获取所有图片集合console.log(img)//遍历图片集合for (let item of img) {//获取图片距视口顶部的距离var imgHeight = item.getBoundingClientRect();//判断当图片出现在视口160px时把地址放到src中，显示出图片if (imgHeight.top < (viewHeight - 360)) {item.src = item.getAttribute("data-original")console.log(item.src)}}}lazyload();    //页面加载时把当前视口中的图片加载进来document.addEventListener('scroll', lazyload);}</script>

HTML `data-*` 属性

使用 data-* 属性来嵌入自定义数据
所有主流浏览器都支持 data-* 属性
定义和用法
data-* 属性用于存储页面或应用程序的私有自定义数据。

data-* 属性赋予我们在所有 HTML 元素上嵌入自定义 data 属性的能力。

存储的（自定义）数据能够被页面的 JavaScript 中利用，以创建更好的用户体验（不进行 Ajax 调用或服务器端数据库查询）。

data-* 属性包括两部分：

属性名不应该包含任何大写字母，并且在前缀 “data-” 之后必须有至少一个字符
属性值可以是任意字符串
注释：用户代理会完全忽略前缀为 “data-” 的自定义属性。

`getBoundingClientRect` 方法介绍

理解：getBoundingClientRect用于获取某个元素相对于视窗的位置集合。集合中有top, right, bottom, left等属性。

1.语法：这个方法没有参数。

        rectObject = object.getBoundingClientRect();

2.返回值类型：

rectObject.top：元素上边到视窗上边的距离;

rectObject.right：元素右边到视窗左边的距离;

rectObject.bottom：元素下边到视窗上边的距离;

rectObject.left：元素左边到视窗左边的距离;

JS原生实现图片懒加载相关推荐

html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介什么是图片懒加载懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
js原生实现高性能懒加载(分步解析)
小弟不才,自己做了一个简单的懒加载,为了节约 window.onscroll的次数 ,提高性能, 设计了函数节流和函数防抖两种模式 , 后面想到更好的方法会更新,也请各位朋友多多指点!! :D 废话不 ...
新版 chrome 将原生支持图片懒加载！
web前端教程用大白话,来讲编程查看全文 http://www.taodudu.cc/news/show-1159812.html 相关文章: 你真的适合做前端吗?自学入行的那些坑前端人的职场晋 ...
Vue使用图片懒加载
为什么要使用图片懒加载? 从后端获取数据时有一定的延迟,加载的时候图片会突然跳出来,图片懒加载就是在还没获取到图片数据的时候放一张动图占位,获取到数据再替换,增加用户体验. 安装 npm instal ...
PC端、移动端(手机端)图片懒加载方法整理
1.PC端图片懒加载: jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们 ...
js实现审批流_小程序瀑布流组件:支持翻页与图片懒加载
电商小程序中,用到瀑布流的地方非常多,每次都写一个瀑布流,重复一次逻辑,作为程序员,肯定是非常不愿意的. 瀑布流的形式都是大同小异,不同的是瀑布流中每个模块的内容,随业务而变化. 所以,我们把瀑布流框 ...
WEB前端实现图片懒加载 echo.js
echo.js是一个轻小的图片懒加载js插件,在使用过程中很多朋友可能是直接自定义一张占位图片,可能会造成图片的变形等.其实这并不是最佳的解决方案.下面给大家介绍另一种方法,简单的控制下css,实现l ...
分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
JS无限滚动、回到顶端和图片懒加载
目录前言 1 无限滚动(垂直) 1.1 效果和代码 1.2 过程解释 1.2.1 监听页面滚动 1.2.2 获取距页面底部的距离 2 回到顶端 2.1 效果和代码 2.2 过程解释 3 图片懒加载 ...

最新文章

热门文章