手写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实现图片懒加载
在项目开发中,我们往往会遇到一个页面需要加载很多图片的情况.我们可以一次性加载全部的图片,但是考虑到用户有可能只浏览部分图片.所以我们需要对图片加载进行优化,只加载浏览器窗口内的图片,当用户滚动时,再 ...
随机推荐
- c++代码实现中时间复杂度的不断优化
先来介绍一下时间复杂度: 同一问题可用不同算法解决,而一个算法的质量优劣将影响到算法乃至程序的效率.算法分析的目的在于选择合适算法和改进算法. 计算机科学中,算法的时间复杂度是一个函数,它定量描述了该 ...
- 创建型模式 - 原型模式Prototype
孩子生来没娘的NT审核机制,又开始说我涉及到广告了,我涉及到什么广告了?我接着发. 学习而来,代码是自己敲的.也有些自己的理解在里边,有问题希望大家指出. 所属:创建型模式 原型模式 一般会和 工场 ...
- 导出excel类型转换
Map headmap = new LinkedHashMap<String, String>(); headmap.put("createtime", "日 ...
- MySQL-多表查询的两种方法、Navicat、python操作MySQL
1.多表查询的两种方法 1.连表操作: 1.1:inner join:内连接,将两张表共同的部分连接起来生成一张新表.拼接顺序是把后面的表拼在前面的表,如果颠倒位置结果不同. select * fro ...
- C-07\字符串的输入输出及常用操作函数
一.算法优化: 减少分支优化 // 求绝对值 int MyAbs(int n) { if (n < 0) { n = ~n + 1; } return n; } // 优化 int MyAbs( ...
- CAS 悲观锁 乐观锁
前面的偏向锁,轻量级锁,重量级锁都是悲观锁, 都会认为必须要对操作对象进行互斥访问,不然就会产生异常, 所以线程只供一个线程使用,阻塞其他线程,是悲观的 在某些情况下,同步的耗时远大于线程切换的时间, ...
- （原创）【B4A】一步一步入门04：编译模式、打包为APK、私钥签名
一.前言 上篇 (原创)[B4A]一步一步入门03:APP名称.图标等信息修改 中我们将APP做成了标准的样子. 本篇文章会讲解如何将程序打包成APK文件以分发,同时讲解如何制作私钥并签名APP,以用 ...
- STL中的智能指针(Smart Pointer)及其源码剖析： std::unique_ptr
STL中的智能指针(Smart Pointer)及其源码剖析: std::unique_ptr 和 std::auto_ptr一样,std::unique_ptr也是一种智能指针,它也是通过指针的方式 ...
- 推荐一个分布式单点登录框架XXL-SSO!
有关单点登录(SSO)之前有写过两篇文章 一文读懂 JWT! 看完这篇不能再说不懂SSO原理了! 如果说XXL-JOB你可能并不陌生,它是非常火爆的一个分布式任务调度平台.但其实在该作者还有一个非常优 ...
- A*算法小记
\(\text{A*}\) 一种启发式搜索 和暴搜的差别是多了一个估价函数,每次取出一个估算最优的状态以期更高效完成任务 重点在于估价函数 \(\text{h*(n)}\) 的设计,若实际代价为 \( ...