手写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实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- 异常机制（Exception）
异常机制(Exception) 什么是异常 实际工作中,遇到的情况不肯恩格式非常完美的.比如:你写的某个模块,用户输入不一定符合你的要求.你的程序要打开某个文件,这个文件可能不存在或者格式不对,你要读 ...
- mysql03-默认的几个数据库
https://blog.csdn.net/dj673344908/article/details/80482844 1.查看mysql默认的数据库 在安装好mysql后,登录mysql,执行语句:s ...
- vs code 关联gitee码云或github以及GIT 常用命令
一.准备 1.本地安装vs code 和GIT源代码管理工具 2.配置vscode git全局变量 打开左下角设置-->点击用户-->搜索git.path-->settings.js ...
- elasticsearch之日期类型有点怪
一.Date类型简介 elasticsearch通过JSON格式来承载数据的,而JSON中是没有Date对应的数据类型的,但是elasticsearch可以通过以下三种方式处理JSON承载的Date数 ...
- 接口介绍以及postman的基本使用
集成测试--测试接口 接口测试也是在测试执行阶段做 一.什么是接口 软件的不同模块之间互相发送数据的一个通道 二.接口的组成 1.请求URL--接口地址2.请求类型 get get请求的参数是暴露在U ...
- 与ChatGPT关于测试问题的对话
1测试人员创造什么价值? 测试人员在软件开发生命周期中扮演着非常重要的角色,他们的主要职责是确保软件在发布前达到高质量标准.以下是测试人员为软件开发和业务提供的价值: 1.缺陷检测和修复:测试人员的主 ...
- el-input 限制只能输入正整数
1.前端页面 <el-row :gutter="20"> <el-col :span="20"> <el-form-item la ...
- Zookeeper+SpringCloud微服务（入门二）
1.Zookeeper注册中心 1.服务提供者Provider 新建cloud-provider-zk-payment-8004 pom.xml: <dependencies> <d ...
- SpringMVC的文件、数据校验（Vaildator、Annotation JSR-303）
SpringMvc的文件上传下载: 文件上传 单文件上传 1.底层使用的是Apache fileupload组件进行上传的功能,Springmvc 只是对其进行了封装,简化开发, pom.xml &l ...
- ABAP 辨析ON INPUT|REQUEST|CHAIN-INPUT|CHAIN-REQUEST
1.逻辑流 在屏幕开发中,存在如下逻辑流: PBO(Process Before Output):屏幕输出之前触发 PAI(Process After Input):用户在屏幕中执行操作触发 POH( ...