手写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实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- 如何使用 JuiceFS 创建 WebDAV 共享
WebDAV 是一种基于 HTTP 的文件共享协议,最初被设计用于多用户文档协作编辑的场景,也被广泛应用在基于互联网的文件存储.数据同步等网盘类应用场景. 手机端和 PC 端有大量的应用内置了对 We ...
- 下一代编解码技术Ali266在视频超高清领域的应用展望
超高清与各领域的需求融合和创新正在发生. 2022年是一个体育大年,众多世界级体育赛事通过视频直播.转播等形式给观众带来畅爽的观看体验. 2022年北京冬奥会,实现了奥运会历史上首次赛事全程4K制作播 ...
- java中锁的概念/介绍
前言 Java提供了种类丰富的锁,每种锁因其特性的不同,在适当的场景下能够展现出非常高的效率.本文旨在对锁相关源码(本文中的源码来自JDK 8和Netty 3.10.6).使用场景进行举例,为读者介绍 ...
- 破解练习-CRACKME001
001-注册算法分析 一.工具和调试环境 动态调试工具:x64dbg 系统环境:win10 1909 二.分析Serial/name的算法 由于Serial里面就是一个字符串比较,没有啥算法,这里就不 ...
- Vue 注册全局组件的方式
一.语法:Vue的实例.component("组件名称",组件) 1.方式一:这个组件就是 vue文件 import { createApp,h } from 'vue' //引入 ...
- 用ChatGPT，快速设计一个真实的账号系统
hi,我是熵减,见字如面. 用ChatGPT,可以尝试做很多的事情. 今天我们就来让ChatGPT做为架构师,来帮我们设计一个账号系统吧. 我的实验过程记录如下,与你分享. 用户故事 首先,我们从用户 ...
- 三年观察揭示TNF抑制剂持续改善强柱患者躯体功能的预测因子
标签:强直性脊柱炎; TNF抑制剂; 躯体功能; 预测因子 一项为期3年的观察研究揭示TNF抑制剂持续改善强直性脊柱炎患者躯体功能的预测因子 电邮发布日期:2016年3月28日 文献出处: van W ...
- 使用 UnoCSS shortcuts 简化 class
UnoCSS 确实简化了不少样式书写.也降低了 CSS 打包体积,提升了样式使用率.但样式太多的话,class 也写得多,比较费眼.所幸,UnoCSS 提供了 shortcuts 来简化 class, ...
- 重新配置 Idea Webapp 部署
一般 Idea 创建一个 Webapp 时已经自动配置好了,但难免出现意想不到的意外,例如,访问资源 404,编译之后没有把 jsp 页面部署进去等问题. 1️⃣第一步,配置 Project Sett ...
- mysql常用命令汇总
1.查询表占用空间语句:SELECT CONCAT(table_schema,'.',table_name) AS 'Table Name', table_rows AS 'Number of Row ...