利用 JS 判断页面图片静态资源链接是否有效是否加载完成

最新推荐文章于 2025-05-19 14:35:28 发布
最新推荐文章于 2025-05-19 14:35:28 发布
阅读量2.2k 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 前端 文章标签： JS判断静态资源链接是否有效 非第三方静态资源加载优化
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/PY0312/article/details/104764649

文章目录

一、功能说明

利用原生 JS 实现对图片静态资源链接是否有效进行判断：

  • 如果资源链接有效，直接渲染；
  • 如果资源链接失效，3秒后替换新的链接，进行第二次渲染；
  • 如果新的链接仍然失效，直接取消加载，保证页面所有资源处于完全加载完毕状态。

---- Nick.Peng


二、动图效果展示

在这里插入图片描述

三、完整源代码

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>非第三方静态资源加载中断优化Demo</title>
</head>
<body>
  <img
最低0.47元/天 解锁文章

200万优质内容无限畅学
我的架构梦：（六十一） 分布式缓存 Redis 之缓存的读写模式
riemann_的博客
11-22 802
缓存有三种读写模式 1、Cache Aside Pattern(常用) Cache Aside Pattern(旁路缓存)，是最经典的缓存+数据库读写模式。 1.1 读的时候，先读缓存，缓存没有的话，就读数据库，然后取出数据后放入缓存，同时返回响应。 1.2 更新的时候，先更新数据库，然后再删除缓存。 1.3 问题：为什么是删除缓存，而不是更新缓存呢? 缓存的值是一个结构:hash、list，更新数据需要遍历 懒加载，使用的时候才更新缓存 也可以采用异步的方式填充缓存 1.4 高并发脏读
端性能优化——加载页面和静态资源
aide521521的博客
03-16 1067
最近一直在准备面试，接触了一些性能优化方面的知识，前端性能优化主要从两个方面进行：1.加载页面和静态资源；2.页面渲染；这篇文章主要讲第一点：加载页面和静态资源加载页面和静态资源主要可以从三个角度进行：静态资源的合并、压缩静态资源缓存（css、img）使用CDN让静态资源加载更快我们一个一个仔细展开说。静态资源的合并、压缩静态资源的合并和压缩能够减少HTTP请求的数量和请求资源的大小。可以使用we...
js--判断资源是否存在
冷月心的博客
12-17 2298
js--判断资源是否存在
如何使用JavaScript判断图片是否在页面加载完成
最新发布
Dxy1239310216的博客
05-19 568
本文介绍了在网页开发中使用JavaScript判断图片加载状态的多种方法。首先，可以通过complete属性快速检查图片是否加载完成。其次，通过监听load和error事件，可以更可靠地处理图片加载成功或失败的情况。为了简化异步操作，可以使用Promise封装图片加载过程。此外，文章还提供了检查页面所有图片加载状态的方法，以及使用MutationObserver监控动态添加图片的技巧。最后，文章给出了性能优化建议，如预加载关键图片、懒加载非关键图片等。根据具体需求，开发者可以选择合适的方法来提升网页性能和用
JavaScript判断图片是否加载完成的三种方式
weixin_33810006的博客
05-03 269
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。   一、load事件 &lt;!DOCTYPE HTML&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8"&gt; &lt;title&gt;img - load event&lt;/title&gt; &lt;
js判断图片链接是否有效
weixin_45173576的博客
03-07 619
=。= function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image(); ImgObj.src = imgurl; ImgObj.onload = function(res) { resolve(res); } ImgObj.onerror = fun
如何判断一个网页是否加载完毕
jmp esp
06-09 1561
我目前常采用的方案主要有两种1:知道url的情况下DocumentComplete事件中判断url 是否等于m_Brow.GetLoctalUrl()如果相等则表示加载完成 2:不知道url的情况下 BeforeNavigate2事件中记录第一次到来的指针 if (!g_pDisp) { g_pDisp = pDisp; } 然后再Do
解决js图片加载时出现404的问题
10-23
在图片加载完成之后，`onload`事件会被触发，这时可以编写事件处理函数来执行加载完成后的逻辑，例如添加到页面中的特定位置或者调整图片大小等。 6. 在使用JavaScript或`jQuery`进行图片动态加载处理时，应当考虑...
我们是如何做好前端工程化和静态资源管理 - 無雄 - 博客园
2401_85158399的博客
07-12 2080
在拿到设计稿后，我们首先需要确定哪些需要做成公共组件，那些是要做成独立组件，以及组件间如何进行通信。在页面中调用这些组件后，会自动加载组件的模板以及组件的静态资源，而当组件不再需要时，只要移除掉组件引用，那么相应的模板和静态资源也会不再加载。组件化的好处主要有这么几点管理方便，我们可以把一个独立功能相关的文件在工程目录中放在一起，这样代码管理起来会非常便利组件复用，通过抽取公共组件，可以实现组件复用，从而减少工作量，创造价值。
一个可以将静态资源jscss缓存到本地localStorage的小工具
08-11
标题中的“一个可以将静态资源jscss缓存到本地localStorage的小工具”指的是一个JavaScript应用程序，它的主要功能是帮助开发者将网站的静态资源，如JavaScript（js）和样式表（css）文件，存储在用户的浏览器本地...
基于JS的图片加载技术：提升效率减轻服务器压力
1. **懒加载的实现**：通常使用JavaScript监听滚动事件，判断图片是否进入可视区域，再动态地向`<img>`标签的`src`属性赋值图片链接。 2. **图片预加载**：预加载是一种提前加载图片的技术，当JavaScript代码判断到...
js判断url是否有效的两种方法
12-12
方法一:(仅适用于ie) 代码如下:function CheckStatus(url)        {            XMLHTTP = new ActiveXObject(“Microsoft.XMLHTTP”)            XMLHTTP.open(“HEAD”,url,false)            XMLHTTP.send()            return XMLHTTP.status==200        }        function NetPing()        {              return CheckStatus(“//ww
jQuery 判断图片是否加载完成方法汇总
12-08
对于图片的处理，例如幻灯片播放、缩放等，都是依赖于在所有图片完成之后再进行操作。 今天来看下如何判断所有的图片加载完成，而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。 一、普通方法 监听 img 的 load 方法，每 load 一张图片比较一次。关键代码如下： var num = $img.length; $imgs.load(function() { num--; if (num > 0) { return; } console.log('load compeleted'); } 二、使用 jQuery 中的 Deferred 对象
js判断图片是否存在
06-15
js判断图片是否存在,不存在就显示其他的
js 判断链接图片是否存在
qq_42768522的博客
05-20 462
function checkImgExists(imgurl) { return new Promise(function(resolve, reject) { var ImgObj = new Image() ImgObj.src = imgurl ImgObj.onload = function(res) { resolve(res) } ImgObj.onerror = function(err) { reject(err) .
Html检测资源是否加载,【前端】打开网站时loading是怎么判断资源是否加载完的？...
weixin_36323859的博客
06-02 1079
经常打开网页看到loading，但是想知道网站怎么判断资源是否加载完的？还有就是京东那样的，不是整个页面loading，而是分块loading，下拉的时候就能看出来,这个是怎么实现的呢？回答首先告诉你一下， 你说的2种情况(初始化loading，分块loading)都是手动的， 而不是自动的。先说分块加载， 比如有场景：滚动条滚到某处，触发读取下一页数据， 读取到下次需要加载的图片url， 先读好...
springboot通过源码查看静态资源加载原理
shao_junne博客
06-14 602
spingboot静态资源加载源码展示访问优先级 源码展示 WebMvcAutoConfiguration.java源码中找到addResourceHandlers方法 public void addResourceHandlers(ResourceHandlerRegistry registry) { //this.resourceProperties.isAddMappings()如果对resourceProperties进行配置，那么就会禁用默认资源处理 //resourc
js判断各种资源是否加载完成的方法汇总，资源预加载问题
yanhanhui1的博客
03-03 8277
将网站放在服务器后，因为服务器带宽问题，才发现很多资源比如图片、音频在网站打开后1分钟还没有加载，导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运行，只有资源全加载完成了才能进入主页面。 在网上查了很多都是说用onload，但是这只能判断文档dom树是否解析完成，但是音频、图片等等资源加载完成没是无法判断的。 下面我将来一一分享我的方案。 1，判断音频/视频是否加载完成 音频，视频元素分别是<audio>、<vedio>，这两个元素都有ready
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值