首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

是否可以在使用setAttribute("src")和getAttribute("data-src")加载图像时运行事件?

在使用setAttribute("src")和getAttribute("data-src")加载图像时,是可以运行事件的。

setAttribute("src")方法用于设置元素的src属性,可以将图像的URL赋值给该属性,从而加载图像。而getAttribute("data-src")方法用于获取元素的data-src属性的值,该属性可以用于存储图像的URL。

在加载图像时,可以通过给图像元素添加事件监听器来执行相应的操作。例如,可以使用addEventListener方法来监听图像的load事件,当图像加载完成后触发相应的回调函数。

以下是一个示例代码:

代码语言:txt
复制
var img = document.createElement("img");
img.setAttribute("src", "image.jpg");
img.addEventListener("load", function() {
  // 图像加载完成后执行的操作
  console.log("图像加载完成");
});

在上述代码中,当图像加载完成后,会在控制台输出"图像加载完成"。

需要注意的是,使用setAttribute("src")和getAttribute("data-src")加载图像时,应确保图像的URL是有效的,并且图像的加载时间可能会受到网络状况的影响。

对于腾讯云相关产品,可以推荐使用腾讯云的对象存储(COS)服务来存储和管理图像文件。腾讯云对象存储(COS)是一种安全、高可靠、低成本的云存储服务,适用于各种场景下的数据存储和处理需求。

腾讯云对象存储(COS)产品介绍链接地址:https://cloud.tencent.com/product/cos

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

实现图片懒加载

实现图片懒加载 图片懒加载就是当页面需要展示较多图片时,首先只加载显示在当前屏幕位置的图片,页面向下滚动时,再加载其他需要显示在当前屏幕位置的图片,这样可以防止一次性对服务器发送大量请求,并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗...("data-src", v); // 存储真实需要加载的url img.setAttribute("loaded","no"); // 存储图片是否加载完成...var tmp = new Image(); // new一个缓存img节点 主要是为了实现隐式加载 tmp.src = v.getAttribute("data-src..."); // 设置缓存节点的src 使其开始加载 tmp.onload = function(){ // 缓存img加载完成事件...v.src = v.getAttribute("data-src"); // 缓存img加载完成后将真实url赋值文档显示的图片节点 浏览器会直接读取缓存 }

1.2K20
  • 图片懒加载

    使用图片懒加载可以解决以上问题提高页面首次加载的速度懒加载允许推迟加载图片,只有在用户需要查看它们时才加载,从而加速页面的初始加载速度。...节省宽带资源通过懒加载可以减少不必要的网络请求,节省带宽,并避免加载用户当前不可见的内容。减少服务器负载通过推迟加载图片,服务器可以更有效地处理其他请求,提高整体的性能稳定性。...如何实现图片懒加载2.1 第一种: 使用img 标签的 loading 属性loading 属性指定浏览器是应立即加载图像还是延迟加载图像。...2.2 第二种: 通过js指定时机设置 img 的 src 属性值实现步骤:拿到所有图片的dom元素遍历这个含有图片的元素列表是否到达了可视区的范围内如果到了, 旧将该元素的src 属性进行设置监听浏览器的滚动...,我们就会得知:判断图片是否处于可视区, 就可以根据该元素相对浏览器的top 浏览器可视区域的高 做相减如果值为负数, 说明该元素处在浏览器的可视区域内如果值为正数, 说明该元素于浏览器的可视区域的外面代码实现因此我们就可以编写我们的代码了

    13810

    实现图片懒加载

    Web 图片的懒加载就是通过读取img元素,然后获得img元素的data-src(也可以约定为其他属性名)属性的值,并赋予img的src,从而实现动态加载图片的机制。...这里需要注意的是: img初始化的时候不要设置src属性,因为即使设置 src='' 浏览器也会尝试加载图片。 一个简单的图片懒加载共涉及两个方面, 1....HTML 约定 我们首先需要给准备实施懒加载的img元素添加指定的class 这里为m-lazyload ,同时将img src赋值给 data-src属性。...el = imgList[i]; if (_isShow(el)) { el.src = el.getAttribute('data-src'); el.className...当网页滚动的事件被触发 -> 执行加载图片操作 -> 判断图片是否可视区域内 -> ,则动态将data-src的值赋予该图片。

    1.5K40

    带你搞懂图片懒加载

    加载原理 一张图片就是一个标签,浏览器是否发起请求图片是根据的src属性,所以实现懒加载的关键就是,图片没有进入可视区域时,先不给的src赋值,这样浏览器就不会发送请求了...图片懒加载的原理就是我们先设置图片的 data-src 属性(当然也可以是其他任意的,只要不会发送 http 请求就行了,作用就是为了存取值)值为其图片路径,由于不是 src,所以不会发送 http 请求...然后我们计算出页面 scrollTop 的高度浏览器的高度之和, 如果图片举例页面顶端的坐标 Y(相对于整个页面,而不是浏览器窗口)小于前两者之和,就说明图片就要显示出来了(合适的时机,当然也可以是...其他情况),这时候我们再将data- src属性替换为 src 属性即可 js代码: // onload是等所有的资源文件加载完毕以后再绑定事件 window.onload = function(){...imgs[i].src = imgs[i].getAttribute('data-src') } },2000)

    77910

    图片错误自动重载

    那么下来我们来分别看下这两个处理流程 2 处理现存图片 我们需要获取到所有现有的图片,然后逐个遍历去判断图片是否加载失败 但是对于可能已经加载完成的图片我们怎么判断是否加载失败呢?...我们可以全局监听一个 error 事件,并且 事件回调中 判断元素是 img 才进行处理 那么具体是怎么做呢 document.body.addEventListener( 第三个参数useCapture...,超过3次使用默认图片 1不处理懒加载图片 首先懒加载的图片在没有划上屏幕的时候,是没有加载的,src为空,只data-src或者lazy-src保存原图片链接 所以这些图片不适用于错误重载,直接跳过...('data-src') || node.getAttribute('lazy-src'); if (!...element.getAttribute('data-src') || element.getAttribute('lazy-src'); if (

    1.5K20

    性能优化-懒加载(图片 组件 路由)

    更有甚者,一个页面可能会有几百个图片,但是页面上仅仅只显示前几张图片,那其他的图片是否可以晚点加载用于提高性能。什么是懒加载? 懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。...vue中组件懒加载又称为代码分割,也叫延迟加载,即在需要的时候进行加载,随用随载。图片懒加载的实现原理一张图片就是一个标签,而图片的来源主要是依靠src属性。...浏览器是否发起请求根据是否src属性决定。没有进到可视区的时候,就不给赋src属性,这样就不会发起请求。...= imgs[i].getAttribute('data-src'); //只会请求一次 // onload判断图片加载完毕,真是图片加载完毕...,用真图片替换假图片 imgs[i].src = imgs[i].getAttribute('data-src')

    69430

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

    除了和我的同事们强调视频体积小压缩视频的重要性以外,也希望代码上有一些奇迹发生。...下面是最终的解决方案: 尝试使用 JavaScript 加载 监听 canplaythrough 事件 如果 canplaythrough 事件没有 2 秒内触发,那么使用 Promise.race...() 将视频加载超时 如果没有监听到 canplaythrough 事件,那么移除 ,并且取消视频加载 如果监测到 canplaythrough 事件,那么使用淡入效果显示这个视频 标记...为了不让某些低网速或低图形处理能力的手机用户担心,小屏幕手机上也会直接返回。(我考虑是否可以通过 元素的媒体查询来做这些,但也不确定。) 然后给每个视频运行这个视频加载逻辑。...如果这个视频可以播放,那么我就会拿到之前传的 can play,然后试一下是否可以播放这个视频。

    1.3K40

    实现一个Vue自定义指令懒加载

    可以Network中查看,页面滚动的时候,会看到图片一张张加载出来。 ? lazyLoad 为什么要做图片懒加载加载是一种网页性能优化的方式,它能极大的提升用户体验。...懒加载原理 图片的标签是 img标签,图片的来源主要是 src属性,浏览器是否发起加载图片的请求是根据是否src属性决定的。...所以可以从 img标签的 src属性入手,没进到可视区域的时候,就先不给 img 标签的 src属性赋值。 懒加载实现 实现效果图: ? imgLazyLoad <!...= imgs[i].getAttribute("data-src"); n = i + 1; } } } window.addEventListener...= lazyImage.getAttribute('data-src'); // 当前图片加载完之后需要去掉监听 lazyImageObserver.unobserve

    99130

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

    除了和我的同事们强调视频体积小压缩视频的重要性以外,也希望代码上有一些奇迹发生。...下面是最终的解决方案: 尝试使用 JavaScript 加载 监听 canplaythrough 事件 如果 canplaythrough 事件没有 2 秒内触发,那么使用 Promise.race...() 将视频加载超时 如果没有监听到 canplaythrough 事件,那么移除 ,并且取消视频加载 如果监测到 canplaythrough 事件,那么使用淡入效果显示这个视频 标记...为了不让某些低网速或低图形处理能力的手机用户担心,小屏幕手机上也会直接返回。(我考虑是否可以通过 元素的媒体查询来做这些,但也不确定。) 然后给每个视频运行这个视频加载逻辑。...如果这个视频可以播放,那么我就会拿到之前传的 can play,然后试一下是否可以播放这个视频。

    2.4K30

    JavaScript图片库

    若返回的值是true,onclick事件处理函数就认为这个函数被点击了,若为false,就相反;所以加上return false,就可以防止用户被带到目标链接窗口; 注意:return false;只...--合理放置了JS脚本加载完DOM后加载JS脚本,提高了页面的加载速度,提现了内容优先的原则--> 在学习完JavaScript动态向文档中添加元素内容后http://www.cnblogs.com...("href");//获取图片的链接地址 placeholder.setAttribute("src", source); var text = whichpic.getAttribute...--合理放置了JS脚本加载完DOM后加载JS脚本,提高了页面的加载速度,提现了内容优先的原则--> 这个版本的图片库的结构行为分离的已经很彻底了,但是还是有个问题...JS图片库再做一次改进,代码如下: 第六版: utility.js  公共库 /* window.onload事件(当页面加载完毕时需要调用的事件,也就是说当我们开发中需要调用一些JS函数页面加载完毕后执行的可以这个事件绑定

    3.7K60
    领券