手写Web图片懒加载~
废话不多说，直接上代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>图片懒加载</title>
5 </head>
6 <body class="body__wrap">
7 <img class="img-item" data-src="https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b2de9c82d158ccbf24cbdbd11fd8bc3eb03541e1.jpg"/>
8 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.58cdn.com.cn%2Fenterprise%2Fappearance%2Fbig%2Fn_v23adc7f847e544e69b79ec9aecee3cfbc.jpg&refer=http%3A%2F%2Fpic1.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=b5a8638474a8fc7a6c32ce0033d085eb"/>
9 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F5b0988e595225.cdn.sohucs.com%2Fimages%2F20171223%2F6bb0ded3ce1a454ba03f1bdec2f3a21e.jpeg&refer=http%3A%2F%2F5b0988e595225.cdn.sohucs.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=b670fa670c8cbb6eb202ce6a6c8fe6e2"/>
10 <img class="img-item" data-src="https://img1.baidu.com/it/u=300787145,1214060415&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500"/>
11 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zhux2.com%2Feditor1557461334164035.jpg&refer=http%3A%2F%2Fimg.zhux2.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257937&t=b42101a51b60d03181f21fe55ccb08bd"/>
12 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fb1-q.mafengwo.net%2Fs10%2FM00%2FE2%2FAF%2FwKgBZ1kbqwOAH1MAABy3rpak-sc216.png&refer=http%3A%2F%2Fb1-q.mafengwo.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=0dd6850ebc0b1feec9758812b9869b1f"/>
13 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fwww.cneo.com.cn%2Fdata%2Fattachment%2Fportal%2F201906%2F26%2F162658zehn728jpqj9v2v2.jpeg&refer=http%3A%2F%2Fwww.cneo.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=05545ba34edf07da7d7baf0df7050972"/>
14 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.58cdn.com.cn%2Fenterprise%2Fappearance%2Fbig%2Fn_v21015771e1c78477499d839e7c51ac82b.jpg&refer=http%3A%2F%2Fpic1.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=b8b76cb66951e23f38b55546d669b308"/>
15 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.ui.cn%2Fdata%2Ffile%2F9%2F0%2F4%2F2335409.gif&refer=http%3A%2F%2Fimg.ui.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=64f6e827fa1f3cc5dbd0bf61117f7c5b"/>
16 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zhux2.com%2Feditor1555854991695607.jpg&refer=http%3A%2F%2Fimg.zhux2.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=4c45b0899ec6c04f4211a1cae5769074"/>
17 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.zhux2.com%2Feditor1558079251358240.jpg&refer=http%3A%2F%2Fimg.zhux2.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=c959cc1a2c2b7568d972bc81c9b2c0bc"/>
18 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.58cdn.com.cn%2Fuserauth%2Fpp%2Fn_v26f7c146e8e584f81b2b962cf89af1059.jpg&refer=http%3A%2F%2Fpic1.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=38db972617be1a8fc42c43a2a77b75f5"/>
19 <img class="img-item" data-src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic1.58cdn.com.cn%2Fenterprise%2Fappearance%2Fbig%2Fn_s12407540124093488123.jpg&refer=http%3A%2F%2Fpic1.58cdn.com.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1652257964&t=3cd33543a4c96b15ad71a4456727231a"/>
20 </body>
21 <style>
22 .body__wrap {
23 height: 100vh;
24 width: 100vw;
25 }
26 .img-item {
27 width: 20vw;
28 height: 30vh;
29 display: block;
30 }
31 </style>
32 <script>
33 function lazyLoadImage() {
34 const imgs = document.getElementsByTagName('img');
35 for(img of imgs) {
36 const rande = img.getBoundingClientRect&&img.getBoundingClientRect();
37 if(rande&&(rande.top+30)<window.innerHeight) {
38 img.src = img.dataset.src;
39 } else {
40 break
41 }
42 }
43 }
44
45 window.addEventListener('scroll', lazyLoadImage)
46 lazyLoadImage()
47 </script>
48 </html>
我们可以根据此思路去拓展我懒加载的功能，例如：图片加载失败，图片加载中的状态，默认展示的图片等等。
拿Vue组件封装举例，将需要懒加载的图片放置在当前组件容器中，然后走上面的逻辑代码，拿到所有图片，或者不需要懒加载的地方可以设置data-lazy=false,等等，具体需要什么看你自己的拓展！
拜拜~
手写Web图片懒加载~的更多相关文章
- [jQuery插件]手写一个图片懒加载实现
教你做图片懒加载插件 那一年 那一年,我还年轻 刚接手一个ASP.NET MVC 的 web 项目, (C#/jQuery/Bootstrap) 并没有做 web 的经验,没有预留学习时间, (作为项 ...
- 带加载进度的Web图片懒加载组件Lazyload
在Web项目中,大量的图片应用会导致页面加载时间过长,浪费不必要的带宽成本,还会影响用户浏览体验. Lazyload 是一个文件大小仅4kb的图片懒加载组件(不依赖其它第三方库),组件会根据用户当前浏 ...
- 手写web框架之加载Controller，初始化框架
1,加载Controller 我们需要创建 一个ControllerHelper类,让它来处理下面的逻辑: 通过ClassHelper我们可以获取所有定义了Controller注解的 ...
- 手写web框架之加载配置项目
一 定义框架配置项 在项目的src/main/resources目录下创建一个名为smart.propertiesd的文件,文件的内容如下: smart.framework.jdbc.driver= ...
- 用jquery写的图片懒加载
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding= ...
- jQuery.imgLazyLoad图片懒加载组件
一.前言 当一个页面中请求的图片过多,而且图片太大,页面访问的速度是非常慢的,对用户的体验非常不友好:使用图片懒加载,可以减轻服务器的压力,增加页面的访问量,这里主要是总结一下我自己写的图片懒加载组件 ...
- 08.Python网络爬虫之图片懒加载技术、selenium和PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
- 图片懒加载，Selenium，PhantomJS
引入 今日概要 图片懒加载 selenium phantomJs 谷歌无头浏览器 知识点回顾 验证码处理流程 今日详情 动态数据加载处理 一.图片懒加载 什么是图片懒加载? 案例分析:抓取站长素材ht ...
- Zepto picLazyLoad Plugin，图片懒加载的Zepto插件
嗯,学着国外人起名字Zepto picLazyLoad Plugin确实看起来高大上,其实js代码没几句,而且我每次写js都捉襟见肘,泪奔--- 图片懒加载有很多js插件,非常著名的属jQuery的L ...
- 页面性能优化-原生JS实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- OuputStreamWriter介绍-OuputStreamReader介绍
OuputStreamWriter介绍 java.io.Outputstreamlwriter extends writeroutputStreamwriter:是字符流通向字节流的桥梁:可使用指定的 ...
- 字符编码和字符集-FileReader读取jbk格式的文件
字符编码和字符集 字符编码 计算机中储存的信息都是用二进制数表示的,而我们在屏幕上看到的数字.英文.标点符号.汉字等字符是二进制数转换之后的结果.按照某种规则,将字符存储到计算机中,称为编码.反之,将 ...
- postman的安装与使用
一.在浏览器搜索postman找到官网 二.选择自己电脑的操作系统 三.点击下载按钮 完成下载之后双击安装程序即可完成安装操作自动下载到C盘,无法自定义安装 四.安装完成之后自动跳出该页面 我们在学习 ...
- 【随笔记】NDK 编译开源库 nghttp2/openssl/curl
工作中有遇到需要使用支持 http2 访问的 https 安全加密的开源库,便于使用 http2 与云端通信,经过调研发现 libcurl 可以满足需求,但是 libcurl 本身也是需要依赖于 ng ...
- 使用Addressables.LoadAssetAsync<Asset>(target)加载unity资源，不止是gameobject
要声明的方法: public static async Task<string> ReadJsonData(string target){ TextAsset jsonDataObjec ...
- ubuntu 备份系统
1.安装Systemback: sudo add-apt-repository ppa:nemh/systemback sudo apt-get update sudo apt-get install ...
- Spring（Spring的静态工厂方法-动态工厂方法）
Spring的工厂方法: IoC通过工厂模式创建bean对线有两种方式: 静态工厂模式 实例工厂模式 区别在与:静态工厂不需要实例化,实例工厂需要实例化 1.静态工厂 实体类Car package c ...
- GDOI2021游记
\(\text{Day0}\) 4月9日抵达深圳耀华实验学校 宿舍在迷你公寓,竟然是女生公寓?!! 我想起了 \(b\) 站看到的一个 \(NOI\) 全国总决赛的纪录片(惊人的相似) 不过确实还行 ...
- 关于php imagettftext 函数错误解决问题
imagettftext 这个函数是给图片添加水印的,但是不知道为什么我用不起,直到在网上找到了答案: 是因为字体文件路径原因,相对路径可能我位置不对,该成绝对路径就没问题了! 把'Facon-2.t ...
- EULAR2021_推文_大多数免疫抑制剂对辉瑞新冠疫苗效果影响小
尤其令人开心的是TNF抑制剂和抗IL-17!但是,糖皮质激素.利妥昔单抗.吗替麦考酚酯(MMF).阿巴西普(抑制T淋巴细胞激活)会明显降低疫苗接种效果.链接:http://note.youdao.co ...