JS实现非首屏图片延迟加载的示例
作者:Shapeying 发布时间:2024-04-23 09:27:49
标签:JS,非首屏,图片,延迟,加载
目标
减少资源加载可以明显的优化页面加载的速度,所以可以减少页面载入时立即下载的图片的数量,以提高页面加载速度,其他的图片在需要的时候再进行加载。
思路
想要实现以上的目标,有几个地方需要思考。
1、如何判断哪些图片需要立即加载,哪些可以晚些再加载?
2、如何控制图片在指定的时候加载?
对于第一个问题,页面打开就会被用户看到的图片肯定需要立即加载,其他的可以延后。即在视窗中的图片需要立即加载。那么如何判断图片是否在视窗内呢?getBoundingClientRect可以返回元素的大小及其相对于视口的位置(详细说明)
可以通过图中top和right的值判断图片是否在视窗中。
对于第二个问题,先不给img指定src,而是将图片链接地址存放再元素的data-src属性(自定义)中,需要加载的时候再赋值给src,才会开始下载图片。
实现
思路有了,我们开始实现。用以下HTML进行测试
<div class="container">
<h1>图片懒加载</h1>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<img src="" alt="" class="lazy-img" data-src="http://c.hiphotos.baidu.com/zhidao/pic/item/1f178a82b9014a909461e9baa1773912b31bee5e.jpg">
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1718/ntk-1718-66531.jpg">
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<img src="" alt="" class="lazy-img" data-src="http://2t.5068.com/uploads/allimg/151105/48-151105112944-51.jpg">
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/anime/4654/4654-4708.jpg">
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<img src="" alt="" class="lazy-img" data-src="http://img2.niutuku.com/desk/1208/1721/ntk-1721-66572.jpg">
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
<p>测试性配文,测试图片懒加载</p>
</div>
html中链接都来自百度图片,可在network中观察是否加载,这里忽略样式。按照之前的思路,有以下代码
//所有的图片
var imgs = document.querySelectorAll('.lazy-img');
//首屏图片加载
lazyLoad(imgs)
//剩余图片加载---监听滚动事件
window.addEventListener('scroll',function(){
//滚动事件触发太频繁了,所以加上节流
throttle(lazyLoad(imgs),200,500)
})
}
下面就是如何实现lazyLoad
function lazyLoad(imgs,offset){
offset = offset || 100;
if (!imgs || imgs.length < 1) {
console.log('imgs为空');
return ;
}
[].slice.call(imgs).forEach(function(element,index){
//元素的DomRect
var rect = element.getBoundingClientRect()
//出现在视窗中
if (rect.top <= window.innerHeight + offset && rect.right > 0) {
element.setAttribute('src',element.getAttribute('data-src'))
}
})
}
通过window.innerHeight获取到视窗的高度,当元素距离视窗上边沿为offset时,加载图片;其中offset为指定的偏移距离。
节流函数如下
function throttle (fn, delay, atleast) {
let timer = null
let startTime = new Date()
return function () {
let context = this
let args = arguments
let curTime = new Date()
clearTimeout(timer)
if (curTime - startTime >= atleast) {
fn.apply(context, args) // apply 指定函数指向的 上下文(this) 和 参数列表
startTime = curTime
} else {
timer = setTimeout(function () {
fn.apply(context, args)
startTime = curTime
}, delay)
}
}
}
效果
页面载入完成,只加载了一张图片
向下滚动到指定位置,才会依次加载后续图片
来源:https://www.cnblogs.com/shapeY/archive/2018/01/05/8205694.html


猜你喜欢
- 比如代码 binfo = {'name':'jay','age':20,'pytho
- 本文实例讲述了js实现点击后将文字或图片复制到剪贴板的方法,代码非常简洁实用,具体功能代码如下所示:实现复制文字代码:<table w
- mysql> select binary 'ABCD'='abcd' COM1, 'ABCD&
- 问题描述前端时间在公司的时候,要使用angular开发一个网站,因为angular很适合前后端分离,所以就做了一个简单的图书管理系统来模拟前
- 如何在PYTHON里运用私有属性和方法class File:def __init__(self, name):self.name = nam
- 先来一个官网链接:https://www.xmind.cn/有钱的也可以支持一波然后开始吧–百度网盘获取地址:链接: h
- 现象:已知,连接的WIFI网络需要通过代理服务器才能连接外网,按照正常的程序无法发送邮件,而直连一个没有代理的网络【如自己的wifi热点】,
- TKinterPython 的 GUI 库非常多,之所以选择 Tkinter,一是最为简单,二是自带库,不需下载安装,随时使用,跨平台兼容性
- 无参修饰 ,无参数时不需要调用def log1(func): func()@log1def test(): prin
- 下面开始构造HTTP数据包,IP层和TCP层使用python的Impacket库,http内容自行填写。#!/usr/bin/env pyt
- 环境:Python3.6.4 + pandas 0.22主要是DataFrame.apply函数的应用,如果设置axis参数为1则每次函数每
- 本文实例为大家分享了Python九宫格图片生成的具体代码,供大家参考,具体内容如下利用Image类将一张图片分割成9张,发朋友圈利器,打包成
- 也就是 addEventListener 和 on 的区别为什么需要 addEventListener?先来看一个片段:<div id
- [root@vm1 ~]# rpm -ivh groundwork-foundation-pro-1.6.1-67.noarch.rpm P
- 背景:我们有一个用go做的项目,其中用到了zmq4进行通信,一个简单的rpc过程,早期远端是使用一个map去做ip和具体socket的映射。
- 1、XML 是什么?XML仅仅是一种数据存放格式,这种格式是一种文本(虽然XML规范中也提供了存放二进制数据的解决方案)。事实上有很多文本格
- 1、版本说明 :python 2.7.10, Django (1.6.11.6),centos72、步骤说明:A、django 建立项目dj
- 数据库隔离级别有四种,应用《高性能mysql》一书中的说明:然后说说修改事务隔离级别的方法:1.全局修改,修改mysql.ini配置文件,在
- 为了安全起见,需要经常对数据库作备份,或者还原。对于 MySQL 而言,最方便的方法可能就是用 phpMyAdmin 的导出、导入功能了,但
- 1.引入正则模块(Regular Expression)要使用python3中的RE则必须引入 re模块import re #引入正则表达式