图片懒加载

懒加载的目的不是为了拦截图片的src,而是防止图片未加载完成时出现的空白。
所以强行将data-src换成src去加载页面对于没有src属性的标签可以实现(按背景图处理),但对于含有src属性的标签是不可行的(如:img)。
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>图片懒加载</title>
 6 </head>
 7 <style>
 8     img{
 9         display: block;
10         border: 1px solid red;
11     }
12     div{
13         transition: 1s;
14         width:600px;
15         height:400px;
16         background-size: cover; 
17         background-image: url('data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=');
18         border: 1px solid red;
19         text-align: center;
20     }
21 </style>
22 <body>
23     
24     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图1</div>
25     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图2</div>
26     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图3</div>
27     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图4</div>
28     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图5</div>
29     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图6</div>
30     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图7</div>
31     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图8</div>
32     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图9</div>
33     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图10</div>
34     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图11</div>
35     <div class="lazy" data-src="https://dummyimage.com/600x400/00ffff/000">背景图12</div>
36     <hr>
37     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图" width="600" height="400" />
38     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=片" width="600" height="400" />
39     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图片" width="600" height="400" />
40     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=呵呵" width="600" height="400" />
41     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=啊啊" width="600" height="400" />
42     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=作者" width="600" height="400" />
43     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=摆手" width="600" height="400" />
44     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=微笑" width="600" height="400" />
45     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=图" width="600" height="400" />
46     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=杀杀杀" width="600" height="400" />
47     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000&text=看看看" width="600" height="400" />
48     <img class="lazy" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkwBADs=" data-src="https://dummyimage.com/600x400/00ffff/000" width="600" height="400" />
49 
50     <script src="lazyload.js"></script>
51     <script>
52         // 默认class是lazyload
53         let images = document.querySelectorAll(".lazy");
54         
55         window.addEventListener("load", function(event) {
56             // let timeout = setTimeout(function() { // 延迟5秒加载
57             //     lazyload();
58             // }, 5000);
59             lazyload(images);
60         });
61     </script>
62 </body>
63 </html>

插件地址:https://github.com/tuupola/jquery_lazyload/tree/2.x

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏十月梦想

css的position定位详解

iii.  父级元素定位(绝对定位absolute)的子元素absolute定位情况:都不保留原文档流空白

793
来自专栏无原型不设计

[桌面版] 在 Mockplus 2.1 (预览版)中使用图片轮播

1、创建移动项目 2、从交互分类中添加一个图片轮播组件 3、点击图片轮播组件上小工具条上的图片选择按钮 4、选择一张或多张图片。(这里只会把对话框中勾选...

5448
来自专栏向治洪

html5标签基础

1.声明:<!DOCTYPE> HTML有多个不同的版本,只有完全明白页面中使用的确切HTML版本,浏览器才能完全正确的显示出HTML页面,这就是<!DOC...

1929
来自专栏游戏杂谈

CCLabelAtlas的宽度为奇数时的显示bug

遇到一个很郁闷的bug,CCLabelAtlas设置文字内容在ipad上和android上正常,就只有iphone怎么显示都不正常。后来把它宽度 + 1,然后就...

1091
来自专栏柠檬先生

jquery 层级选择器

关于层级选择器。 $("parent > child") 选择所有指定“parent”元素中指定的“child”的直接子项元素。 parent :...

18710
来自专栏JavaEdge

CSS 全解析实战(二)-HTML基础强化1 HTML常见元素和理解(1)2 HTML常见元素和理解(2)3 HTML常见元素和理解(3)4 HTML版本5 元素分类6 嵌套关系

761
来自专栏小樱的经验随笔

【Android开发学习笔记之一】5大布局方式详解

Android中常用的5大布局方式有以下几种: 线性布局(LinearLayout):按照垂直或者水平方向布局的组件。 帧布局(FrameLayout):组件从...

3428
来自专栏河湾欢儿的专栏

表单

form 表单 <input type="…… " name="" value="" /> text 文本框 passwor...

942
来自专栏菜鸟计划

CSS布局(五) 网页布局方式

网页实质是块与块之间的位置,块挨着块,块嵌套块,块叠着块。 三种关系:相邻,嵌套,重叠。 下面介绍网页布局的常用几种方式 ? 1.一列布局: 一般都是固定的宽高...

3906
来自专栏Java帮帮-微信公众号-技术文章全总结

07.HTML实例

3374

扫码关注云+社区