[jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件
那一年
那一年，我还年轻 刚接手一个ASP.NET MVC 的 web 项目，
（C#/jQuery/Bootstrap）
并没有做 web 的经验，没有预留学习时间，
（作为项目组长的我，主要C#客户端经验）
项目来了只能硬上，把JS比作C#来写（哭
当时接到请求协助解决一个图片显示慢的问题时，给出了一个后来看来不好的解决方案。
那个项目结束一段时间之后，内心愧疚的我把这个图片懒加载的jQuery插件发了过去。（现在我JS已经搞很溜了你信不信，哇哈哈~）
jQuery 的辉煌时代已成过去，
但不能否定这是个非常优秀的 js 库，
而且仍有大量旧网站在用它。
今天聊一下如何开发一个基于 jQuery 的图片懒加载插件（当然只要你想也可以脱离jQuery用纯原生js）。
工作原理
如何才能懒加载呢？
- 页面初始加载时统一设置一个fake图片
- 在data属性上记录真实图片的url地址
- 在预期的时机请求相应的图片资源
以上，就是一个图片懒加载插件的大致工作原理。
准备
滚动加载
假设一个这样的场景：
- 页面有大量图片
- 出现有滚动条
- 可视范围内的图片要加载
- 可视范围外的图片仍为占位图
- 当滚动时，可视范围外的图片进入（或即将进入）可视范围则发起请求获取图片并显示
带滚动条的图片展示页面
先创建一个demo-lazyload-window-scroll.html的图片展示页面，效果如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo-lazyload</title>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<style>
.container{
padding:10px 50px;
display: flex;
flex-direction: column;
align-items: center;
height: 300px;
overflow-y: auto;
border: 1px solid gray;
background-color: lightskyblue;
}
.img{
flex: 1;
margin: 10px 0;
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<h2>用于展示图片的页面，检验我们的懒加载插件</h2>
<div id="container" class="container">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575255351&di=f793ab57355f48f8dac4dd9c84df3f79&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F591580f307d75.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140514/13102479_214919550103_2.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140514/13102479_215137440121_2.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="http://pic38.nipic.com/20140213/9422601_094926378000_2.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140505/9448607_213048662000_2.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="https://setouchifinder.com/ja/wp-content/uploads/sites/2/2018/03/01onokorojima.jpg">
<img src="./blank_img.png" alt="" class="img" data-lazysrc="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1703/23/c15/40225820_1490275789503.jpg">
</div>
</body>
</html>
- 通过CDN引入了jQuery
container里有7张图片，src都是一个占位用空图片data-lazysrc的值才是真正要显示的图片，我们插件里就取这个值来用
预想的用法
在上面的html页面，
- 引入我们将要完成的插件js
- 调用混入进jQuery的
lazyLoad方法
就是这么简单
<script src="./jquery.lazyloader.js"></script>
<script>
window.onload = function() {
$('.img').lazyLoad()
}
</script>
IIFE
在没有js模块化的年代，人们通过IIFE来解决作用域问题。
IIFE全称Immediately Invoked Function Expression，
即立即执行函数表达式，通过用一个立即执行的函数的形式，
包裹起这个函数的作用域。
(function() {
// coding here
root.xx = function(){}
})(root)
然后通过参数传入全局对象等参数，
将插件对象挂载到全局对象上，
以实现在页面上直接使用。
那时的jQuery等库也都是这种风格形式的，插件也不例外。
开发jQuery的插件，要用到jQuery的extend方法，传入一个对象，就可以将对象的属性方法给扩展到现有jQuery对象上。
(function() {
// coding here
$.fn.extend({
lazyLoad: function() {}
})
})()
剩下的就是去实现我们的lazyLoad方法了
具体实现
lazyLoad
创建js文件：jquery.lazyloader.js
这时我们要考虑如下几点：
- 页面加载时要显示可视区域的图片
- 其它等滚动时再获取并显示（如果有的话）
这样，任务可以分解为：
- 工具函数：判断是否进入可视区域
- 公用函数：获取未显示img元素的真实图片地址，并显示（设到src属性）
- 监听滚动：调用显示图片的函数逻辑即可
同时还要注意对已通过懒加载显示完的图片不在进行处理
(function() {
// coding here
$.fn.extend({
lazyLoad: function() {
var that = this
// 初始化时加载一次进入可视区域的图片
showRealImage(this)
// 滚动条拖动时显示未加载且进入（即将进入）可视区域的图片
$(window).scroll(function(){
showRealImage(that)
})
}
})
/**
* 修改进入可视区域的图像元素的真实图像地址使之显示
*
* @param {*} $eleList
*/
function showRealImage($eleList){
if(!$eleList || !$eleList.length){
return
}
// 先过滤，后处理
$eleList.filter((i, ele)=>{
var $img = $(ele)
// 作为处理对象的条件：
// 1.未加载
// 2.进入可视区域
// 3.DOM标签为img
return !$img.attr('loaded') && isInSight($img) && ele.nodeName.toLowerCase() === 'img'
}).each(function(i,ele){
var $img = $(ele)
var source = $img.data('lazysrc')
if(source){
// 显示真实图片
$img.attr('src', source)
}
// 设为已加载，之后不再需要处理
$img.attr('loaded', true)
})
/**
*判断图像元素是否进入可视区域（包含预加载Offset的距离）
*
* @param {*} $node
*/
function isInSight($node){
return ($node.offset().top - 50) <= $(window).height()+$(window).scrollTop();
}
}
})()
现在就可以打开demo-lazyload-window-scroll.html试一下效果了。
为了效果明显，可以将网络调为3G。
验证方法
F12打开页面调试工具，通过watch查看图片的src，可以看到初始状态下只有第一张是显示了真是图片的；
一边拖动滚动条，一边刷新watch的结果，可以看到在距离马上就要显示下一张的时候，就会加载出它的真实图片。
存在的问题
虽然能够看到效果了，但是：
- 这里我们用了固定的offset值
- 还用了默认的图片父元素/容器：window
实际上的情况肯定要复杂，这样可不是个合格的插件。
比如当显示图片的区域只是一部分而不是整个window的时候，这里就会失效了。
改进
针对上面提到的情况，我们创建另外一个html文件：
demo-lazyload-container-scroll.html
在这个html文件里，图片显示区域作为子元素被一个div包裹。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo-lazyload</title>
<script src="https://cdn.bootcss.com/jquery/2.0.3/jquery.min.js"></script>
<style>
.container{
padding:10px 50px;
display: flex;
flex-direction: column;
align-items: center;
height: 300px;
overflow-y: auto;
border: 1px solid gray;
background-color: lightskyblue;
}
.img{
flex: 1;
margin: 10px 0;
width: 100%;
}
</style>
</head>
<body>
<h2>用于展示图片的页面，检验我们的懒加载插件(非window滚动)</h2>
<div id="container" class="container">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1575255351&di=f793ab57355f48f8dac4dd9c84df3f79&imgtype=jpg&er=1&src=http%3A%2F%2Fpic1.win4000.com%2Fwallpaper%2Fa%2F591580f307d75.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140514/13102479_214919550103_2.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140514/13102479_215137440121_2.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="http://pic38.nipic.com/20140213/9422601_094926378000_2.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="http://pic41.nipic.com/20140505/9448607_213048662000_2.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="https://setouchifinder.com/ja/wp-content/uploads/sites/2/2018/03/01onokorojima.jpg">
<img src="https://s2.ax1x.com/2019/11/25/MXLO6f.png" alt="" class="img" data-lazysrc="http://img.pconline.com.cn/images/upload/upc/tx/photoblog/1703/23/c15/40225820_1490275789503.jpg">
</div>
<script src="./jquery.lazyloader.js"></script>
<script>
window.onload = function() {
$('.img').lazyLoad({
preOffset: 80,
container: document.getElementById('container')
})
}
</script>
</body>
</html>
页面效果图：
- 上面将占位图片由本地文件换为了线上图片，对于验证没有影响。
- 这次在调用懒加载方法时，传入了自定义内容作参数：
- 预加载Offset的距离：offset
当拖动滚动条，下一张图片距离要显示还有这些像素的时候开始加载 - container元素：container
图片区域的父元素，滚动对象
- 预加载Offset的距离：offset
页面中script调用处：
<script>
window.onload = function() {
$('.img').lazyLoad({
preOffset: 80,
container: document.getElementById('container')
})
}
</script>
详情参照注释文字，完整的实现如下：
/**
* 图片懒加载jQuery插件
*
* 2019-07-25
* CoderMonkie
*/
(function(){
// 配置信息
var options = {}
/**
* 默认配置
*/
function defaultOptions(){
return {
preOffset: 100,
container: window
}
}
// 扩展 lazyLoad 方法
$.fn.extend({
lazyLoad: function(setting){
var that = this
options = defaultOptions()
// 确保参数合法的情况下
if(setting && toString.call(setting) === '[object Object]') {
// 确保参数里设定项目的值的类型正确
// preOffset：数值(负数没有意义，NaN更不符合要求： >= 0)
// container：DOM元素
if(setting.preOffset && typeof(setting.preOffset) === 'number' && setting.preOffset >= 0){
options.preOffset = setting.preOffset;
}
if(setting.container && setting.container.nodeType){
options.container = setting.container
}
}
// 初始化时加载一次进入可视区域的图片
showRealImage(this)
// 滚动条拖动时显示未加载且进入（即将进入）可视区域的图片
$(options.container).scroll(()=>{
showRealImage(that)
})
}
})
/**
*修改进入可视区域的图像元素的真实图像地址使之显示
*
* @param {*} $eleList
*/
function showRealImage($eleList){
if(!$eleList || !$eleList.length){
return
}
// 先过滤，后处理
$eleList.filter((i, ele)=>{
var $img = $(ele)
// 作为处理对象的条件：
// 1.未加载
// 2.进入可视区域
// 3.DOM标签为img
return !$img.attr('loaded') && isInSight($img) && ele.nodeName.toLowerCase() === 'img'
}).each(function(i,ele){
var $img = $(ele)
var source = $img.data('lazysrc')
if(source){
// 显示真实图片
$img.attr('src', source)
}
// 设为已加载，之后不再需要处理
$img.attr('loaded', true)
})
/**
*判断图像元素是否进入可视区域（包含预加载Offset的距离）
*
* @param {*} $node
*/
function isInSight($node){
return ($node.offset().top - options.preOffset) <= $(options.container).height() + $(options.container).scrollTop();
}
}
})()
[jQuery插件]手写一个图片懒加载实现的更多相关文章
- Vue实现一个图片懒加载插件（转载）
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- 闭包，jQuery插件的写法：图片预加载
最近做的一些网页,单个网页图片量都比较大,网络不好的情况下,特别卡,这个图片预加载的方法可以牺牲一些时间换来网页的浏览顺畅,还是值得的. //闭包的写法,它内部的变量都是局部的,不会和外部巳有的变量进 ...
- 用jquery写的图片懒加载
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- 插件：★★★ !!!图片懒加载 lazyload.js 、 jquery.scrollLoading.js
插件:图片懒加载 jquery.lazyload.js 2016-3-31 插件说明:http://www.w3cways.com/1765.html (小插件,好用) 下载地址: https://r ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- JS实现图片懒加载插件
一.前言 我在前几篇博客的记录中,有说自己在做一个图片懒加载的功能,然后巴拉巴拉的遇到哪些问题,结果做完了也没对懒加载这个功能做一些记录,所以这篇文章主要针对我所实现的思路,以及代码做个记录,实现不佳 ...
- jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明
jQuery图片懒加载插件jquery.lazyload.js使用实例注意事项说明 jquery.lazyload.js是一个用JavaScript编写的jQuery插件.它可以延迟加载长页面中的图片 ...
- jQuery插件图片懒加载lazyload
来自XXX的前言: 什么是ImageLazyLoad技术 在页面上图片比较多的时候,打开一张页面必然引起与服务器大数据量的 交互.尤其是对于高清晰的图片,占的几M的空间.ImageLazyLoad技术 ...
随机推荐
- 图论--Floyd总结
Key word: ①最短路 ②传递闭包:大小关系 数值关系 先后关系 联通关系 ③floyd变形 ④实现方式:插点发法 ⑤思想:动态规划 1.最短路: 最短路 ...
- 题目分享k
题意:开关问题,有n只奶牛朝前或朝后,要使这n只奶牛全部朝前,每次能且必须翻转k只奶牛,求在最少翻转次数下的最小的k值,n≤5000 分析:n²暴力直接水过......枚举k值,对于每个k值因为最左边 ...
- search（9）- elastic4s logback-appender
前面写了个cassandra-appender,一个基于cassandra的logback插件.正是cassandra的分布式数据库属性才合适作为akka-cluster-sharding分布式应用的 ...
- c/c++获取文件夹下所有文件名
如何获取某一文件夹下所有文件名,是一个很有意思的问题.网上代码很多,找了个简单的,特此收录. #include <iostream> #include <io.h> #incl ...
- DHCP报文（1）
DHCP报文 1.地址申请类型(4步工作原理,常考) (1)此题是典型的四步工作原理,在其配置过程中由于没有分配IP地址,用的是广播形式,所以其4中报文类型的目的IP地址均为255.255.255.2 ...
- Unity2019.3缺少Cinemachine插件/AssetStore搜索不到
Unity2019.1版本都还自带Cinemachine,到2019.3就没有了(原因暂时未知),PackageManager里没有,到资源商店里搜索也找不到 解决方法: Windows>Pac ...
- 【Hadoop离线基础总结】Hue与Mysql集成
Hue与Mysql集成 1.修改hue.ini配置文件 这里要去掉#,打开mysql注释,大概在1547行 [[[mysql]]] nice_name="My SQL DB" en ...
- {bzoj2338 [HNOI2011]数矩形 && NBUT 1453 LeBlanc}平面内找最大矩形
思路: 枚举3个点,计算第4个点并判断是否存在,复杂度为O(N3logN)或O(N3α) 考虑矩形的对角线,两条对角线可以构成一个矩形,它们的长度和中点必须完全一样,于是将所有线段按长度和中点排序,那 ...
- C# 数据操作系列 - 6 EF Core 配置映射关系
0. 前言 在<C# 数据操作系列 - 5. EF Core 入门>篇中,我们简单的通过两个类演示了一下EF增删改查等功能.细心的小伙伴可能看了生成的DDL SQL 语句,在里面发现了些端 ...
- mybatis-generator生成的mapper中的
int updateByExampleSelective(@Param("record") Shop record, @Param("example") Sho ...