img 的data

您所在的位置：网站首页 › jquery修改img标签的src属性 › img 的data

img 的data

2023-05-11 21:33| 来源: 网络整理| 查看: 265

一、什么是图片懒加载

当访问一个页面的时候，先把img元素或是其他元素的背景图片路径替换成一张大小为1*1px图片的路径（这样就只需请求一次），当图片出现在浏览器的可视区域内时，才设置图片真正的路径，让图片显示出来。这就是图片懒加载。

通俗一点： 1、就是创建一个自定义属性data-src存放真正需要显示的图片路径，而img自带的src放一张大小为1 * 1px的图片路径。 2、当页面滚动直至此图片出现在可视区域时，用js取到该图片的data-src的值赋给src。 ps：自定义属性可以取任何名字

HTML:

html.png

CSS:

.container { max-width: 800px; margin: 0 auto; } .container:after{ content: ''; display: block; clear: both; } .container img { float: left; width: 50%; } h1{ clear: both; }

二、需要了解的问题

1、如何加载图片？ 2、如何判断一个元素出现在视野中？

如何加载图片只需要把data-src中的地址放到src的里面就好了

代码：

function loadImg($img){ //.attr(值) //.attr(属性名称,值) $img.attr('src', $img.attr('data-src')) //把data-src的值赋值给src $img.attr('data-isLoaded', 1) //已加载过的图片做标记 }

结果如下：

地址更换.png 如何判断一个元素出现在视野中？元素相对顶点的距离(文字)

【本文地址】

img 的data

img 的data

今日新闻

推荐新闻