是否可以在使用setAttribute("src")和getAttribute("data-src")加载图像时运行事件？ - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

文章/答案/技术大牛

发布

VUI创建日志(一)——图片懒加载指令的实现

，此时修改 src 值为 data-src 的值当然，这一切需要不断地监听滚动事件先实现一个懒加载函数 var img = document.getElementsByTagName('img');...$vuiLazyLoad.img) { img[i].src = img[i].getAttribute('data-src');...$vuiLazyLoad.img); el.setAttribute('data-src', binding.value); Vue....观察元素是否与视窗交叉，若是则修改 scr 为 data-src 值，并解除观察状态，当然这一切的前提是你在图片创建的时候观察图片本身，因此在图片插入时的钩子函数内 inserted(el) {...$vuiLazyLoad.img); el.setAttribute('data-src', binding.value); Vue.

7953 0

实现图片懒加载

实现图片懒加载图片懒加载就是当页面需要展示较多图片时，首先只加载显示在当前屏幕位置的图片，在页面向下滚动时，再加载其他需要显示在当前屏幕位置的图片，这样可以防止一次性对服务器发送大量请求，并可以在用户不需要完整浏览页面的情况下减少服务器资源消耗...("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.5K2 0

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

是的

没有找到

Vue.js的图片加载性能优化你可以试试

资源 Vue.js Element UI 优化一：图片加载动画只有当图片加载完成后才可以显示图片，加载动画结束。我们使用Element UI中的loading组件来用作加载的动画。...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;

2.2K1 0

彻底玩转图片懒加载及底层实现原理

> “但上面的代码如果你在lazyLoad中打印，你会发现滚动条上下滚动时，lazyLoad会被频繁调用，造成很大的性能损失，这里我们可以给事件加上节流throttle 基于 getBoundingClientRect...el.src){ const source = el.getAttribute('data-src');; el.src = source; } } function checkImgs(...传统的实现方法是，监听到scroll事件后，调用目标元素（绿色方块）的getBoundingClientRect()方法，得到它对应于视口左上角的坐标，再判断是否在视口之内。...目前有一个新的 IntersectionObserver API，可以自动"观察"元素是否可见，Chrome 51+ 已经支持。...= img.getAttribute('data-src'); img.setAttribute('src', src) observer.unobserve(img)

1.2K3 1

Vue回炉重造之图片加载性能优化

前言图片加载优化对于一个网站性能好坏起着至关重要的作用。所以我们使用Vue来操作一波。...资源 Vue.js Element UI 12 优化一：图片加载动画只有当图片加载完成后才可以显示图片，加载动画结束。我们使用Element UI中的loading组件来用作加载的动画。...img[i].getAttribute("src") === ""?...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;...(img[i].setAttribute('class', 'opacity'),img[i].src = img[i].getAttribute("data-src")):n = i + 1;

7163 0

说说懒加载怎样实现

滚动事件监听: 监听滚动事件，当滚动到页面的特定部分时才加载内容。对于图像： Intersection Observer API: 使用这个API可以检测元素是否进入了视口。...const img = entry.target; img.src = img.getAttribute('data-src'); observer.unobserve...}); 在这个示例中，我们使用了Intersection Observer API来检测图像是否进入了视口。...如果图像完全在视口中，那么就会加载它的实际源。注意事项：性能考量: 懒加载可以提高性能，但过度使用可能导致复杂的逻辑和额外的开销。...懒加载是一种强大的技术，但需要根据具体场景和需求来合理使用。

1.1K1 0

【JS】1684- 重学 JavaScript API - Resize Observer API

使用 Resize Observer API 可以实现「图片懒加载」。...= img.getAttribute("data-src"); if (src) { img.setAttribute("src", src);...当图片元素进入可视区域时，我们将其 data-src 属性中的 URL 赋值给其 src 属性，从而实现图片懒加载的效果。...注意，在上面的代码中，我们还需要为图片元素设置一个 data-src 属性，其中包含要加载的图片的 URL。这样可以避免在页面加载时立即加载所有图片，从而提高页面性能。...总结在本文中，我们介绍了 Resize Observer API 的基本使用方法，并提供了一些示例代码来帮助大家更好地理解和使用该 API。

1K2 0

图片懒加载

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

1.3K1 0

实现图片懒加载

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.8K4 0

带你搞懂图片懒加载

懒加载原理一张图片就是一个标签，浏览器是否发起请求图片是根据的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)

9791 0

前端面试HTML相关（一）

/duanweidong/interview-question-code.git 方案一：位置计算 + 滚动事件 (Scroll) + DataSet API 1、判断图片是否出现在当前视口： clientTop... 首先设置一个临时 Data 属性 data-src，控制加载时使用 src 代替 data-src，可利用 DataSet API 实现。...= imgs[i].getAttribute('data-src'); } } } window.onscroll = lozyLoad(); </...：使用浏览器IntersectionObserver api, 可以监听元素是否与浏览器视口有交叉，也叫交叉观察器；该api存在兼容性chrom51+以上才能看到效果； 2、控制图片加载同方案一...； src="shanyue.jpg" loading="lazy" /> vue中使用懒加载安装 vue-lazyload 插件，具体使用方法可按插件说明；

4112 0

图片错误自动重载

那么下来我们来分别看下这两个处理流程 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.8K2 0

基于代码审查的前端性能问题识别与优化实践

" data-src="product2.jpg" alt="Product 2" class="lazy-load" /> 并使用JavaScript来实现懒加载： const images = document.querySelectorAll...('.lazy-load'); const loadImage = (image) => { const src = image.getAttribute('data-src'); image.setAttribute...优化事件监听器的使用在前端开发中，频繁的事件监听和处理可能会导致性能问题，尤其是在页面中绑定了大量事件监听器时。通过代码审查，可以发现这些冗余的事件绑定，并进行优化。...案例：为多个元素绑定事件监听器导致性能问题开发者在一个动态生成的表格中，为每一行的删除按钮都绑定了一个事件监听器，这样会导致每次渲染表格时都创建多个监听器。...通过代码审查，检查是否可以使用代码分割（Code Splitting）和延迟加载（Lazy Loading）技术，减少初始加载时的资源请求量。

5012 0

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

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

8903 0

JavaScript实现图片懒加载(lazyload)

图片懒加载可以减少不必要的图片资源请求，提高页面的加载速度，提升用户体验。.../images/8.png" alt="loading"> 完全加载在懒加载优化之前，我们使用全部加载的伪代码，根据islazyLoadBool()方法判断对应的懒加载逻辑...img || img.src) return; img.src = img.getAttribute('data-src'); } function islazyLoadBool(dom) {...rectObject = object.getBoundingClientRect(); 我们可以使用定时器或者scroll事件，在回调函数调用元素的getBoundingClientRect()方法，...，在不支持该API的浏览器使用 polyfill // 加载图片 function loadImg(ele) { let target = ele && ele.target; target.src

1.3K2 0

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

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

1.9K4 0

React 项目精进技巧

* 1，监听图片是否进入可视区域； * 2，将src属性的值替换为真实的图片地址，data-src * 3，停止监听当前的节点 * @param {*} ele 监听的img元素类名，如 .imgBox...// console.log(item) if(item.isIntersecting){ const dataSrc = item.target.getAttribute...('data-src'); item.target.setAttribute('src', dataSrc); observer.unobserve(item.target...={require('@/assets/h5/blank.png')} data-src={item['smallImage']} alt=""/> 滚动加载hook 滚动到底部再加载数据 import...={Arrow} className={styles.button} />} /> })} ) } 之后在没有数据时展示这个骨架屏即可

1.2K1 0

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

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

1.2K3 0

JavaScript实现图片懒加载

(el)); // 需使用懒加载的图片集合 this.init(); // 初始化 } // 获取图片与窗口的信息 getBound(el) { let bound = el.getBoundingClientRect...(); let clientHeight = window.innerHeight; // 图片距离顶部的距离是否需要加载 return bound.top...<= clientHeight - 300; // -300是为了看到效果loading图 } // 判断是否该图片是否可以加载 canILoading() { let imglist...loadImage(el, index) { // 获取节点data-src let src = el.getAttribute('data-src'); // 赋值到src...}); } // 初始化 init() { this.canILoading(); this.bindEvent(); } } // 实例化对象，参数则是需要使用懒加载的图片类名

1.1K1 0

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

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

2.9K3 0

点击加载更多

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭