手写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/C++ 设计模式 - 工厂模式(下)
介绍说明 这篇笔记承接<[学习笔记]C/C++ 设计模式 - 工厂模式(上)>文章,主要记录 "抽象工厂设计模式" 的学习笔记,上一次是以音频播放器来作为例子,主要是想 ...
- pdf转图片加水印压缩
''' pip install pymupdf pip install pillow ''' import os import uuid import fitz from PIL import Ima ...
- Activiti02流程基本功能使用
主要分为一下几个步骤: 1.画图 2.部署流程-把图的信息转入到数据表格中 3.创建流程实例-开始一个流程-实际发起了一个流程 4.执行任务:获取任务+完成任务 1.画图 画了一个简单的流程图,图形文 ...
- P1_Day1.学习目标
目标 能够知道如何创建小程序项目 能够清楚小程序项目的基本组成结构 能够知道小程序页面由几个部分组成 能够知道小程序中常见的组件如何使用 能够知道小程序如何进行协同开发和发布 学习目录 小程序简介 第 ...
- Vue3 中的组件 provide和inject 传值、获取组件实例的方法getCurrentInstance()
一. provide和inject(依赖注入) 1:在父级组件中提供数据 语法:provide('提供给子组件的变量名',提供给子组件的数据) 2: 在子级组件中获取收据 ...
- 快速上手vue前端存储库、全局状态管理工具pinia
pinia是什么,为什么我们要使用pinia? pinia是vue全局状态管理工具,类似vueX,用于全局的数据状态存储.修改变更等等 相较于vueX,pinia的使用较为简单,轻量级,上手容易,干掉 ...
- 【源码】RapidJSON 源码剖析(0.1)：调试工具 GDB 的使用
[源码]RapidJSON 源码剖析(0.1):调试工具 GDB 的使用 正式开始源码阅读之前,有必要了解一下源码阅读中用到的调试工具 GDB. GDB(GNU Debugger) 是一种可以运行在多 ...
- RocketMQ - 消费者概述
消费流程 消费者组: 一个逻辑概念,在使用消费者时需要指定一个组名.一个消费者组可以订阅多个Topic. 消费者实例: 一个消费者组程序部署了多个进程,每个进程都可以称为一个消费者实例. 订阅关系: ...
- XAMPP环境下数据库密码保存文件目录(数据库密码忘记)
转自百度经验: https://jingyan.baidu.com/article/09ea3ede4e2523c0afde3943.html ---------------------------- ...
- Blender如何设置模型中心点
推荐:将 NSDT场景编辑器 加入你的3D开发工具链. 在使用Blender建模的时候,有时候会导入一些从别的地方**过来的模型,这时候就会遇到一个问题,模型放到场景中时与鼠标放置的位置有一定的偏差, ...