lazyload 加载中图片使用的一点技巧

最新推荐文章于 2024-08-12 22:56:24 发布
最新推荐文章于 2024-08-12 22:56:24 发布
阅读量879 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kkgege/article/details/46623279
版权

插件git地址：   https://github.com/vvo/lazyload


<!DOCTYPE html>
<html>
  <head>
    <title>lazyload</title>
  </head>
  <body>
    <script src="lazyload.min.js"></script>

    <!-- A lot of content -->
    <!-- A lot of content -->

    <img
      data-src="real/image/src.jpg"
      src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
      οnlοad="lzld(this)">
  </body>
</html>

当屏幕滚动到指定位置，img图片的 src中的gif（加载中）图片会被图换成data-src中的目标图片。

注意点：

1. 第一行 

<!DOCTYPE html>

这个要写，不然不会动态加载。

2. 如果你设置了 目标图片的长宽(目标图片尺寸不一定)，这时候loadding的gif图 如果根据目标尺寸来显示的话，会被拉伸变形。可以采用以下方法来避免：

2.1准备一张透明的1*1的图片，作为img的src。

2.2 设置img的 background

.img-loadding {
background: rgb(237, 237, 237) url(../images/common/loadding.gif) center center no-repeat;
}


KKgege
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
如何做到优化引擎搜索SEO之第八篇：懒加载图片（调整翻译）
电鳗的博客
06-05 2666
如何做到优化引擎搜索SEO之第八篇：懒加载图片
必知必会篇-前端性能优化之加载优化
老司机的后备箱
10-31 1954
懒加载也叫做延迟加载、按需加载，指的是在长网页中延迟加载图片数据，是一种较好的网页性能优化的方式。在比较长的网页或应用中，如果图片很多，所有的图片都被加载出来，而用户只能看到可视窗口的那一部分图片数据，这样就浪费了性能。使用图片懒加载就可以解决上述问题。在滚动屏幕之前，可视化区域之外的图片不会进行加载，在滚动屏幕时才加载。懒加载适用于图片较多，页面较长的页面场景中。**懒加载与预加载的区别：**一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
data:image/jpeg;base64 php,利用Data URL(data:image/jpg;base64,)加速网页加载的方法
weixin_34811804的博客
04-13 1984
先来看下下边这段代码：JQAlAAACi5SPqcvtDyGYIFpF690i8xUw3qJBwUlSadmcLqYmGQu6KDIeM13beGzYWWy3DlB4IYaMk+Dso2RWkFCfLPcRvFbZxFLUDTt21BW56TyjRep1e20+i+eYMR145W2eefj+6VFmgTQi+ECVY8iGxcg35phGo/iDFwlTyXWphwlm1imGRdcnuqhHe...
Image - 体积最小的 base64 encode 1*1透明图片，透明背景图片base64编码
SAGGITARXM
01-05 1168
就会去把当前的URL再获取一遍（通常会拿到一个HTML文档，就是当前页面的HTML文档），然后赋值给这个图片，但是图片解析失败，图片就展示了报错。在React或Vue中，你可以方便的设置Loading状态，当API请求不成功时，不展示那个。64个字符，使用空白SVG实现，但是SVG不指定大小的话，尺寸不是1*1。属性的值来源于接口，在接口获取结果之前，这个src应该设置为什么呢？74个字符，但存在兼容性问题，不建议用。114个字符，太长了，不建议用。123个字符，太长了，不建议用。好很多，不存在上述问题。
【实验案例2】：使data:image/gif；base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==用虚拟机测试光盘机
2301_79881413的博客
03-06 374
此处需要注意，此步骤相当于选择机器主板。选择正确的操作系统版本。带真正安装操作系统是vmwareworkstation会正确的匹配系统驱动程序。需要刻录成光盘使用，为避免下载的镜像错误或存在安全隐患等情况导致刻录的光盘不能使用，小王决定在虚拟机中测试该光盘。北大青鸟公司系统管理员小王因工作需要，从互联网下载一份工具光盘的镜像。1.安装vmwareworkstation。单击开启虚拟机按钮开启虚拟机。3.在虚拟机中插入光盘镜像。4.启动虚拟机测试光盘镜像。.创建虚拟机并测试光盘。Windows安装程序。
一个像素大小的base64图像
songJunFeng1的博客
06-15 263
一个像素大小的base64图像，适合做网站初始化的默认图。
data:image/gif;base64 用法
JackieLiuLixi的专栏
07-02 1万+
Data URI scheme。 Data URI scheme是在RFC2397中定义的，目的是将一些小的数据，直接嵌入到网页中，从而不用再从外部文件载入。比如上面那串字符，其实是一张小图片，将这些字符复制黏贴到火狐的地址栏中并转到，就能看到它了，一张2*2的白色gif图片。 在上面的Data URI中，data表示取得数据的协定名称，image/gif是数据类型名称，base64 是数据的
前端性能优化总结/懒加载、函数节流、优化dom操作、雪碧图、合并文件
weixin_44990056的博客
02-14 709
1.减少 HTTP 请求数量 在浏览器与服务器进行通信时，主要是通过 HTTP 进行通信。浏览器与服务器需要经过三次握手，每次握手需要花费大量时间。而且不同浏览器对资源文件并发请求数量有限（不同浏览器允许并发数），一旦 HTTP 请求数量达到一定数量，资源请求就存在等待状态，这是很致命的，因此减少 HTTP 的请求数量可以很大程度上对网站性能进行优化。 （1）懒加载 什么是懒加载 懒加载也叫延迟加...
提升前端性能的JavaScript技巧
最新发布
丁爸的博客
08-12 1828
提升前端性能的JavaScript技巧涵盖了减少DOM操作、优化JavaScript代码、异步加载和懒加载、缓存策略、使用现代JavaScript特性、性能和问题检测以及其他一些实用的编程技巧。通过综合运用这些技巧，可以显著提高前端应用的性能和用户体验。
iOS开发——性能优化的25个建议和技巧
Bruce__Liu的博客
10-04 5079
性能对 iOS 应用的开发尤其重要，如果你的应用失去反应或者很慢，失望的用户会把他们的失望写满App Store的评论。然而由于iOS设备的限制，有时搞好性能是一件难事。开发过程中你会有很多需要注意的事项，你也很容易在做出选择时忘记考虑性能影响。 这正是我写下这篇文章的原因。这篇文章以一个方便查看的核对表的形式整合了你可以用来提升你app性能的25条建议和技巧。 请耐心读完这篇
7458data:image/gif；base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==
Adam_python的博客
11-29 299
verilog笔记
大佬教你用Python Tkinter实现数字猜谜小游戏
pythonbobo的博客
11-08 1946
Tkinter是Python的Tk GUI（图形用户界面）工具包和事实上的标准GUI 的标准接口。GUI使您可以使用大多数操作系统使用的可视项（例如窗口，图标和菜单）与计算机进行交互。这个功能强大的工具可用于构建各种项目，并且使可视化代码更加容易。 在本文中，我们将了解Tkinter的基础知识以及可在Python应用程序中使用的不同类型的小部件。在本文的后面，我们将使用Tkinter小部件开发一个很酷的数字猜测游戏。 今天，我们将介绍： Tkinter的基础 Tkinter的小部件与示例 从头开始
将图片转换base64格式，data:image/png;base64是什么？
热门推荐
webxiaoma
04-11 9万+
data:image/png;base64是什么？在代码中我们经常看到图片转换base64格式
如何让你的网页打开速度降低到 1s 内
weixin_33711641的博客
08-08 683
还记得图片延迟加载方案 那篇博文吗？当初分析了定宽高值和定宽高比这两种常见的图片延迟加载场景，也介绍了他们的应对方案，还做了一点技术选型的工作。经过一段时间的项目实践，在先前方案的基础上又做了很多深入的优化工作。最终将好奇心日报的网页打开速度将降低到了1s内，Web端和Mobile端加载3屏数据消耗的流量也大幅降低。模拟WIFI条件下的网页加载该篇文章结合具体的项目实...
lidata:image/gif；base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAAnux使用基于qtwebengine的应用出现--no-sandbox的解决方案
Freedomer_的博客
08-01 1153
保证管用~~~ 背景是在我的电脑上装了个wsl（windows subsystem for linux），想用来做做实验，但是发现和独立系统的linux不一样，坑很多，其中一个就是“--no-sandbox”报错的问题。在装Google浏览器的时候出现过一次，但那个时候可以直接在运行浏览器的命令行后面加一个--no-sandbox的参数，所以就那么解决了，没考虑泛用性。 今日当我费劲装了带spyder3.3.6版本的anaconda后，点spyder的launch，弹出“...
问卷星自动填写JavaScrip脚本使用教程
我这个代码你能看懂吗？
05-21 5003
本文转载自： https://blog.csdn.net/weixin_44343074/article/details/106133929?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522162159047716780366541951%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=162159047716780366541951&
js脚本实现自动签到功能
Merlin2017的博客
08-30 3932
js脚本实现自动签到功能 1.首先在谷歌浏览器安装Tampermonkey插件 2.写入脚本 // ==UserScript== // @name New Userscript // @namespace http://tampermonkey.net/ // @version 0.1 // @description try to take over the world! // @author You // @match http://*/* //
js RPC及Sekro的使用
公过水蚊的博客
10-05 3022
有时候遇到一些加密参数，我们不想知道它是怎么生成的，只想取它的值，这种情况下就适合使用RPC了 第一种使用websocket的方式，通过油猴脚本把浏览器生成好的加密参数通过socket通信方式发送到本地 以这个网址为例，这是一个rs的网址 http://www.nhc.gov.cn/ 查看一下源代码，懂得都懂 油猴脚本代码 // ==UserScript== // @name ws // @namespace http://tampermonkey.net/ // @version
data-lazyload-src滚动加载优化
xingfuzhuizhuzhe的专栏
12-02 5030
滚动加载优化 一般情况下，滚动加载是通过在window上绑定scroll事件，实时遍历容器数组，计算每个元素的scrollTop，满足要求的就触发回调，并从数组里删除该节点。 这样的思路最简单，但是我们知道scroll事件的触发是非常频繁的，在每次触发的时候遍历数组，时间复杂度为O(n)，需要滚动加载的元素越多，每次滚动过程的遍历就越慢，成线性增长。 在做排行榜的时候，因为全站要进行滚动加载
使用jquery.lazyload.js实现图片异步延迟加载
JavaScript代码会监控用户的滚动行为，一旦图片进入可视区域，就会替换`lazy_src`为`src`，实际加载图片。 以下是一个简单的示例： ```html <img lazy_src="图片路径" border="0" /> ``` ```javascript $...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值