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

最新推荐文章于 2023-04-06 16:42:06 发布
原创 最新推荐文章于 2023-04-06 16:42:06 发布 · 2.2k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#JS判断静态资源链接是否有效 #非第三方静态资源加载优化

文章目录

一、功能说明

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

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

---- Nick.Peng


二、动图效果展示

在这里插入图片描述

三、完整源代码

<!DOCTYPE HTML>
<html>
<head>
  <meta charset="utf-8">
  <title>非第三方静态资源加载中断优化Demo</title>
</head>
<body>
  <img
最低0.47元/天 解锁文章
我的架构梦：（六十一） 分布式缓存 Redis 之缓存的读写模式
riemann_的博客
11-22 916
缓存有三种读写模式 1、Cache Aside Pattern(常用) Cache Aside Pattern(旁路缓存)，是最经典的缓存+数据库读写模式。 1.1 读的时候，先读缓存，缓存没有的话，就读数据库，然后取出数据后放入缓存，同时返回响应。 1.2 更新的时候，先更新数据库，然后再删除缓存。 1.3 问题：为什么是删除缓存，而不是更新缓存呢? 缓存的值是一个结构:hash、list，更新数据需要遍历 懒加载，使用的时候才更新缓存 也可以采用异步的方式填充缓存 1.4 高并发脏读
给你一个任意URL网站，能否把该网站的所有文件都爬取下载到本地？以腾讯QQ和QQ音乐为例，除了静态网站资源，还包括网站中图片二维码的下载链接、动态加载资源的各种网站、交互加载资源的各种网站等等
最新发布
代码讲故事
08-15 107
给你一个任意URL网站，能否把该网站的所有文件都爬取下载到本地？以腾讯QQ和QQ音乐为例，除了静态网站资源，还包括网站中图片二维码的下载链接、动态加载资源的各种网站、交互加载资源的各种网站等等。
js--判断资源是否存在
冷月心的博客
12-17 2406
js--判断资源是否存在
JavaScript判断图片是否加载完成的三种方式
weixin_33810006的博客
05-03 296
有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。有三种方式实现，下面一一介绍。   一、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 633
=。= 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 1602
我目前常采用的方案主要有两种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`进行图片动态加载处理时，应当考虑...
端性能优化——加载页面和静态资源
aide521521的博客
03-16 1079
最近一直在准备面试，接触了一些性能优化方面的知识，前端性能优化主要从两个方面进行：1.加载页面和静态资源；2.页面渲染；这篇文章主要讲第一点：加载页面和静态资源加载页面和静态资源主要可以从三个角度进行：静态资源的合并、压缩静态资源缓存（css、img）使用CDN让静态资源加载更快我们一个一个仔细展开说。静态资源的合并、压缩静态资源的合并和压缩能够减少HTTP请求的数量和请求资源的大小。可以使用we...
Magento 2快速链接预取模块提升页面加载速度
其主要功能是“通过在空闲时间预取视口内链接来加快后续页面加载”，这意味着当用户停留在当前页面时，系统会自动识别出当前可视区域内所有可点击的链接（如商品详情页链接、分类导航链接等），并在浏览器处于空闲...
基于静态封面的GIF动态加载Facebook特效代码
然后，利用JavaScript监听页面滚动、点击等事件，判断是否应触发加载动作；接着，通过创建Image对象预加载GIF资源，防止出现闪烁或延迟；最后，完成替换并添加播放/暂停切换功能，甚至可加入淡入淡出过渡动画以提升...
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 507
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 1121
经常打开网页看到loading，但是想知道网站怎么判断资源是否加载完的？还有就是京东那样的，不是整个页面loading，而是分块loading，下拉的时候就能看出来,这个是怎么实现的呢？回答首先告诉你一下， 你说的2种情况(初始化loading，分块loading)都是手动的， 而不是自动的。先说分块加载， 比如有场景：滚动条滚到某处，触发读取下一页数据， 读取到下次需要加载的图片url， 先读好...
springboot通过源码查看静态资源加载原理
shao_junne博客
06-14 622
spingboot静态资源加载源码展示访问优先级 源码展示 WebMvcAutoConfiguration.java源码中找到addResourceHandlers方法 public void addResourceHandlers(ResourceHandlerRegistry registry) { //this.resourceProperties.isAddMappings()如果对resourceProperties进行配置，那么就会禁用默认资源处理 //resourc
js判断各种资源是否加载完成的方法汇总，资源预加载问题
yanhanhui1的博客
03-03 8384
将网站放在服务器后，因为服务器带宽问题，才发现很多资源比如图片、音频在网站打开后1分钟还没有加载，导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运行，只有资源全加载完成了才能进入主页面。 在网上查了很多都是说用onload，但是这只能判断文档dom树是否解析完成，但是音频、图片等等资源加载完成没是无法判断的。 下面我将来一一分享我的方案。 1，判断音频/视频是否加载完成 音频，视频元素分别是<audio>、<vedio>，这两个元素都有ready
JS检查在线图片是否存在
tx10765的博客
04-06 355
JS检查在线图片是否存在
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值