在JavaScript中将src属性更改为data-src - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

Vue图片懒加载之lazyload插件使用

' Vue.use(VueLazyLoad,{ loading:require('common/image/default.png') //这个就是你本地图片的地址 }) 3. vue文件中将需要懒加载的图片绑定...v-bind:src 修改为 v-lazy src="item.imgurl" style="width: 60px;height: 60px;" /> 改成下面的,就可以使用了 data-src' String loading src of the image while loading（预加载图片...） 'data-src' String attempt attempts count（尝试加载图片数量） 3 Number listenEvents events that you want vue listen...transitionend', 'touchmove'] Desired Listen Events adapter dynamically modify the attribute of element （动态修改元素属性

1.2K3 0

图片懒加载原理及实现(java懒加载原理)

2，实现图片懒加载的原理看到这里，我们已经明白了图片加载是src属性做的事情，那么我们只要不给这个src属性赋值不就不会发起请求了嘛！！...然后，html5还提供自定义属性的方式：data-xxx 我们可以先把图片地址存在这里面，然后判断这个图片是否进入屏幕了，一旦进入屏幕，就把这个图片地址赋值给src,让它发起请求获取图片不就好了！...就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中 imgs[i].src = imgs[i].dataset.src; }...就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中 imgs[i].src = imgs[i].dataset.src; }...，节流之后，又让主线程空闲优化了一些;当然，实际不会设500ms这么大的，这里只是让效果更明显一些。

2.3K3 0

您找到你想要的搜索结果了吗？

是的

没有找到

图片懒加载

data-src="https://vampireachao.gitee.io/imgs/preview/3043_3.jpg"> data-src...vampireachao.gitee.io/imgs/preview/3040_3.jpg"> javascript"> // 获取需要懒加载的元素...) { // 如果当前图片处于可视区域,则将data-src中的值放入src e.src = e.dataset.src } } })...) { // 如果当前图片处于可视区域,则将data-src中的值放入src e.src = e.dataset.src } } }) // 滚动时加载 window.onscroll...= lazyLoad } lazyLoad() 然后在你们页面中使用，这里需要将你们原来页面上img标签的src改为data-src，这样在元素处于可视区域,则将data-src中的值放入src，然后达到懒加载的效果

1.9K4 0

基于jQuery或Zepto的图片延迟加载插件

实现原理 src="loading.png" data-src="img/example.jpg"> 页面打开时首先会加载src里的图片，即很小的加载图；通过监听scroll...事件，当图片在可视区域时，使用data-src替换src，加载真正的图片。...，即对应data-src属性 data_srcset_attribute : 'original-srcset', skip_invisible :...global来配置，而不是每次在$(selector).lazyload({})内配置}YAML复制全屏 } 示例： JavaScript $(function() { $(".lazy").lazyload...({ effect : "fadeIn",//效果 data_attribute : 'src',//可以改成src，即对应data-src属性

4.1K2 0

如何深入理解 JavaScript 中的懒加载

要开始，请确保您有一个基本的HTML结构，其中包含带有 img 标签的 data-src 属性，指定图像的实际源URL。...我们将使用 data-src 来存储图片的URL，而不是使用传统的 src 属性来实现图片的懒加载。 data-src" attribute --> 在我们的JavaScript代码中...当观察到一张图片并进入视口时（即 entry.isIntersecting 为真），我们将其 src 属性设置为 data-src 的值，该值保存了实际的图片URL。这个操作触发了图片的懒加载。...但是，这次我们不需要像 data-src 这样的特殊属性。 <!

1.6K3 0

实现图片懒加载

Web 图片的懒加载就是通过读取img元素，然后获得img元素的data-src（也可以约定为其他属性名）属性的值，并赋予img的src，从而实现动态加载图片的机制。...这里需要注意的是： img在初始化的时候不要设置src属性，因为即使设置 src='' 浏览器也会尝试加载图片。一个简单的图片懒加载共涉及两个方面， 1....HTML 约定我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。...具体示例为： data-src="imgUrl"> 2....-> 在，则动态将data-src的值赋予该图片。

1.8K4 0

网速敏感的视频延迟加载方案

下面是最终的解决方案：尝试使用 JavaScript 加载监听 canplaythrough 事件如果 canplaythrough 事件没有在 2 秒内触发，那么使用 Promise.race...data-src="path/to/video.mp4" type="video/mp4"> JavaScript 我编写了一个简单的 JavaScript 类，用于查找带有 ....setSource() 中，我们找到那些作为数据属性（Data Attributes）插入的视频链接，并且将它们设置为真正的 src 属性。.../** * 找 video 子元素中是的， * 基于 data-src 属性， * 给每个设置 src 属性 * * @param...，我所做的就是遍历每一个元素的子元素，找一个定义了 data-src 属性（child.dataset.src）的子元素。

1.9K4 0

懒加载图片以获取最佳性能的最佳方案

loading属性有三个值。...为此，我们将图像的路径添加到data-src而不是src。但是我们不应该将src留空，因此我们将使用1 x 1px透明图像占位符。...我们对img元素标记如下所示： picture...代码对于原生懒加载，我们只需要对img分配data-src值给src值，对source分配data-srcset值给srcset值，剩下的事情就交给浏览器了。

1.6K2 1

使用相交观察器和SQIP进行渐进式图像加载

一旦我开始进一步尝试，它比我想象的更容易。...img标签的data-src中左边的图片显示了低质量的SVG版本，右边的图片是完整的质量版本。...首先，我们在页面加载时加载dog.svg图像，这是我们的低质量图像。接下来，我们使用一个名为data-src的数据属性指向全质量图像源。我们将使用它来尽快替换低质量图像和全面质量的图像。.../img/dog-running.jpg" width="400" height="400" data-src="..../img/dog-face.svg" width="400" height="400" data-src=".

2.7K2 0

网页性能优化之图片懒加载

二、原理先将 img 标签的 src 链接设为同一张图片（一般是loading.gif图片），然后给 img标签设置自定义属性（ data-src），然后将真正的图片地址存储在 data-src 中...，当JS监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中。...三、实现网页loading.gif 素材：http://www.sucaijishi.com/2013/gif_0527/57.html javascript:;" class...="img" rel="nofollow" > src="/static/images/utils/loading.gif" th:data-src="${goodList.goodsImg...data-src 存储的真正的图片地址，赋值给src function loadImg($img){ $img.attr('src', $img.attr('data-src

6503 0

前端性能优化系列 | 加载优化

注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片。在浏览器中，可视区域内的资源就是用户需要的资源。...="loading.gif" data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif..." data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif"...lazysizes 是功能全面的延迟加载库，其使用的模式与本文所示的代码示例非常相似，会自动与元素上的lazyload 类绑定，然后在data-src 和/或 data-srcset 属性中指定图像网址...poster属性，用来指定图片为视频延迟加载出现前的占位，还使用了类似于图像懒加载的方式，将视频的真实地址放在了data-src中。

7261 0

实现图片懒加载（及优化相关）

初始化的时候获得图片的src之后为每一个元素提前添加图片的地址路径。保证在第二张图片显示的时候已经加载到页面当中.（应用于轮播、相册、幻灯片等图片需要进行切换显示的地方）。...-- 使用data-*属性存放图片路径 --> src 属性可为空，或放小图 --> src="" data-src="..../img/1.jpeg" alt="" width="765" height="574"> src="" data-src="..../img/2.jpeg" alt="" width="765" height="574"> src="" data-src="..../img/3.jpeg" alt="" width="765" height="574"> src="" data-src=".

1.4K1 0

高级前端二面常见面试题总结_2023-02-27

根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。...注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。...="loading.gif" data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif..." data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif"...解决：父元素position改为absolute或static；元素没有设置position属性为非static属性。

1.1K2 0

网速敏感的视频延迟加载方案

下面是最终的解决方案：尝试使用 JavaScript 加载监听 canplaythrough 事件如果 canplaythrough 事件没有在 2 秒内触发，那么使用 Promise.race...data-src="path/to/video.mp4" type="video/mp4"> JavaScript 我编写了一个简单的 JavaScript 类，用于查找带有 ....setSource() 中，我们找到那些作为数据属性（Data Attributes）插入的视频链接，并且将它们设置为真正的 src 属性。.../** * 找 video 子元素中是的， * 基于 data-src 属性， * 给每个设置 src 属性 * * @param...，我所做的就是遍历每一个元素的子元素，找一个定义了 data-src 属性（child.dataset.src）的子元素。

2.9K3 0

lazyload.js 懒惰加载框架下载及使用

lazyload.js 懒加载框架下载及使用指南一、概述LazyLoad.js 是一款轻量级 JavaScript 图片懒加载库。...三、HTML 图片设置图片 src 使用占位图或空值，真实图片地址放在 data-src 属性中：data-src="example.jpg" alt="示例图片"...width="300" height="200">php77 Bytes© 菜鸟-创作你的创作四、JavaScript 初始化// 初始化 LazyLoadvar lazyLoadInstance =...display: block; margin: 20px auto; width: 300px; height: 200px; }data-src...="img1.jpg" alt="示例1">data-src="img2.jpg" alt="示例2">data-src="img3

4771 0

前端性能优化常见面试题速查

根据这个原理，可以使用 HTML5 的 data-xx 属性来存储图片的地址，在需要加载的时候，将 data-xx 属性的值赋给 src 属性，就实现了图片的按需加载，即懒加载。...使用原生 JavaScript 实现懒加载知识点 window.innerHeight 浏览器视口高度 document.documentElement.scrollTop 浏览器滚动过的距离 imgs.offsetTop...="loading.gif" data-src="pic.png" /> src="loading.gif" data-src="pic.png" /> src="loading.gif..." data-src="pic.png" /> src="loading.gif" data-src="pic.png" /> src="loading.gif" data-src...="pic.png" /> src="loading.gif" data-src="pic.png" /> var imgs = document.querySelectorAll

6982 0

Fancybox图片灯箱效果实现

（data-src或 href）属性用于指定较大版本图像的路径。附加属性： data-srcset- 为元素设置 srcset属性；image data-sizes- 为元素设置 sizes属性。...image 单图实现： data-src="https://pic.zeyiwl.cn/yunimg/20220123125125.jpg">...="gallery" data-src="https://lipsum.app/id/2/1024x768" data-caption="Optional caption,that...="gallery" data-src="https://lipsum.app/id/3/1024x768"> src="https://lipsum.app/id/3/200x150".../> data-src="https://lipsum.app/id/4/1024x768"> src="https://

3.5K2 0

一起学爬虫——使用xpath库爬取猫眼电

其中src的是图片的地址，在xpath提取规则追加上@src,变为： //*[@id="app"]/div/div/div/dl/dd[1]/a/img[2]/@src 看下这个xpath规则是否能提取到图片的链接地址...难道src属性不存在？通过鼠标右键查看网页源文件： ? 原来src变成了data-src。..."]/div/div/div/dl/dd[2]/a/img[2]/@data-src //*[@id="app"]/div/div/div/dl/dd[3]/a/img[2]/@data-src ......//*[@id="app"]/div/div/div/dl/dd[9]/a/img[2]/@data-src //*[@id="app"]/div/div/div/dl/dd[10]/a/img[2]/...xpath规则获取不到相应的数据时，要注意xpath规则是否准确，有些浏览器会加上一些多余的标签，或者将节点的属性名改掉，例如上面例子中将的img节点的src属性变为data-src。

1.1K1 0

性能优化-懒加载（图片组件路由）

在vue中组件懒加载又称为代码分割，也叫延迟加载，即在需要的时候进行加载，随用随载。图片懒加载的实现原理一张图片就是一个标签，而图片的来源主要是依靠src属性。...浏览器是否发起请求根据是否有src属性决定。在没有进到可视区的时候，就不给赋src属性，这样就不会发起请求。...存放的是加载图片 data-src存放的才是真正的图片地址 src="img/load.png" data-src="img/img.png" /> 实现JavaScript部分：...= imgs[i].getAttribute('data-src'); //只会请求一次 // onload判断图片加载完毕，真是图片加载完毕...data-src，用真图片替换假图片 imgs[i].src = imgs[i].getAttribute('data-src')

8913 0

美团前端面试题（附答案）

在 JavaScript 中，基本类型是没有属性和方法的，但是为了便于操作基本类型的值，在调用基本类型的属性或方法时 JavaScript 会在后台隐式地将基本类型的值转换为对象，如：const a =...根据这个原理，我们使用HTML5 的data-xxx属性来储存图片的路径，在需要加载图片的时候，将data-xxx中图片的路径赋值给src，这样就实现了图片的按需加载，即懒加载。...注意：data-xxx 中的xxx可以自定义，这里我们使用data-src来定义。懒加载的实现重点在于确定用户需要加载哪张图片，在浏览器中，可视区域内的资源就是用户需要的资源。...="loading.gif" data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif..." data-src="pic.png"> src="loading.gif" data-src="pic.png"> src="loading.gif" data-src

4780 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭