js判断各种资源是否加载完成的方法汇总，资源预加载问题

最新推荐文章于 2024-04-24 17:22:10 发布
最新推荐文章于 2024-04-24 17:22:10 发布
阅读量7.8k 收藏 23
点赞数 7
分类专栏： 前端 文章标签： js css html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yanhanhui1/article/details/114315702
版权

将网站放在服务器后，因为服务器带宽问题，才发现很多资源比如图片、音频在网站打开后1分钟还没有加载，导致无法播放。所以说我决定使用js在最开头加一个判断资源是否加载完成的函数并运行，只有资源全加载完成了才能进入主页面。

在网上查了很多都是说用onload，但是这只能判断文档dom树是否解析完成，但是音频、图片等等资源加载完成没是无法判断的。

下面我将来一一分享我的方案。

1，判断音频/视频是否加载完成

音频，视频元素分别是<audio>、<video>，这两个元素都有readyState属性表示其是否加载完成，我们可以获取其属性值，其属性值对应意义如下：

值 意义
0 HAVE_NOTHING - 没有关于音频/视频是否就绪的信息
1 HAVE_METADATA - 关于音频/视频就绪的元数据
2 HAVE_CURRENT_DATA - 关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒</
最低0.47元/天 解锁文章
「已注销」
关注
  • 7
    点赞
  • 踩
  • 23
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
js判断页面是否加载完成
weixin_43193877的博客
12-20 594
js判断页面是否加载完成 下面的图片自己可以转化成base64编码的形式，这里因字数太多我改掉了… //获取浏览器页面可见高度和宽度 var _PageHeight = document.documentElement.clientHeight, _PageWidth = document.documentElement.clientWidth; //计算loading框距离顶部和左部的距离（l...
两种方法实现在HTML页面加载完毕后运行某个js
private_build的博客
07-03 1608
window.onload： 当一个文档完全下载到浏览器中时，才会触发window.onload事件。这意味着页面上的全部元素对js而言都是可以操作的，也就是说页面上的所有元素加载完毕才会执行。这种情况对编写功能性代码非常有利，因为无需考虑加载的次序。、 $(document).ready{ }： 会在DOM完全就绪并可以使用时调用。虽然这也意味着所有元素对脚本而言都是可以访问的，但是，并不意味着所
js判断页面初加载或刷新
最新发布
H30919的博客
04-24 127
【代码】js判断页面初加载或刷新。
js 判断图片和视频是否加载成功
比你优秀的人比你还要努力
11-28 9360
图片： 失败： // 方法 1：更换图片地址 $('img').error(function(){     $(this).attr('src', '加载失败.png'); }); // 方法 2：隐藏它 $("img").error(function(){     $(this).hide(); });   成功 //jquery的方式 $("#imageId").lo...
JavaScript判断页面是否已经加载完毕
weixin_34204722的博客
03-04 378
　　在做针对CheckBox框点击事件的时候，发现点击以后有时候会报错，但是是生成的JavaScript的代码的内部错误，无法判断到底是什么地方有问题。就一直在找问题。刚刚突然想到可能与页面的加载状态有关。就来试了试果然如此。 　　在页面未全部加载完毕的时候，如果点击某些事件会报错的，于是我在需要的JavaScript事件当中添加一个判断 if (document.read...
纯JS监听document是否加载完成
weixin_34413802的博客
01-02 1928
欢迎加入前端交流群交流知识&&获取视频资料：749539640 概述 一个document的Document.readyState属性描述了文档的加载状态。 一个文档的readyState可以是以下之一： loading /加载document仍在加载。interactive /互动（dom加载完成）文档已经完成加载，文档已被解析，但是诸如图像，样式表...
判断js是否加载完成，js加载完回调
浅笑如伤的博客
12-26 6616
1、动态加载js，js完成后进行回调 动态创建script标签，加入页面，js加载完成后执行回调函数。 监听是否加载完成分为IE浏览器和非IE浏览器（Chrome、FF等）。发现IE10及IE10以下支持readyState，Edge和IE11不支持readyState属性（返回当前文档的状态），Edge、IE11、Chrome、FF均支持onload属性 var sc = documen...
js预加载图片方法汇总
12-10
本文实例汇总了js预加载图片方法。分享给大家供大家参考。具体分析如下： 1. 纯CSS： #preload-01 { background: url(http://huoche.7234.cn/images/jb51/mizdkqm5xw2.png) no-repeat -9999px -9999px; } #preload-...
jQuery图片加载失败替换默认图片方法汇总
10-18
主要介绍了jQuery图片加载失败替换默认图片方法汇总,运用到的相关知识jquery的ready方法、$("img").error()、img的complete属性、插件imagesLoaded、事件委托、事件捕获和图片预加载的方法等，需要的朋友可以参考下
javascript如何实现360度全景照片问题汇总
10-22
- 图片预加载：可以创建一个新的`<img>`元素，然后设置其`src`属性为需要加载的图片URL。通过将这些元素添加到DOM中，浏览器会自动开始加载图片。 2. **鼠标事件处理**： - `onmousedown`：当用户按下鼠标时，...
HTML5 Video标签的属性、方法和事件汇总介绍
09-28
- `preload`: 控制视频在页面加载时的预加载策略，可选值包括`none`（不预加载），`metadata`（仅加载元数据），`auto`（尽可能多的预加载）。 - `autoplay`: 如果设置为`autoplay`，视频将在加载完成后立即开始播放...
利用 JS 判断页面图片静态资源链接是否有效是否加载完成
Nick.Peng's Blogs
03-09 2055
文章目录一、功能说明二、动图效果展示三、完整源代码 一、功能说明 利用原生 JS 实现对图片静态资源链接是否有效进行判断： 如果资源链接有效，直接渲染； 如果资源链接失效，3秒后替换新的链接，进行第二次渲染； 如果新的链接仍然失效，直接取消加载，保证页面所有资源处于完全加载完毕状态。 ---- Nick.Peng 二、动图效果展示 三、完整源代码 <!DOCTYPE HTML&g...
js 判断dom元素加载完成_仅作为参考
nailwl
09-09 7642
如果我要判断 img 已经加载完毕 用什么方法可以判断呢 ? 在IE下面可以用这样的方法 var oImg = document.getElementById("img"); if(oImg.readystate=="complete") { alert("图片已经加载完成"); ret
网站的怎么判断一个页面的数据是否加载完？
weixin_44022064的博客
09-05 776
我们在打开一个网页的时候有的时候，会看到网站出现不完整的数据，这样的体验是很不好的。 为此我们可以在网站数据加载完再展示页面。 // 判断数据是否加载wan document.onreadystatechange = loadingChange;//当页面加载状态改变的时候执行这个方法. function loadingChange(){ if(document.read...
判断页面是否加载完成
lio-zero 的博客
03-06 1052
Load 事件触发代表页面中的 DOM，CSS，JS，图片已经全部加载完毕。 DOMContentLoaded 事件触发代表初始的 HTML 被完全加载和解析，不需要等待 CSS，JS，图片加载。 document.addEventListener('load', function () {}) document.addEventListener('DOMContentLoaded', f...
判断视频是否加载完成
北枫林
02-11 2800
setInterval(() => { console.log(document.querySelector('.succeedAduio').readyState); }, 10); 打印结果： 0： 没有关于音频/视频是否就绪的信息 1： 关于音频/视频就绪的元数据 2：关于当前播放位置的数据是可用的，但没有足够的数据来播放下一帧/毫秒 3： 当前及至少下一帧的数据是可用的 4： 可用数据足以开始播放 参考文章：https://blog.csdn.net/yanhanhui1/article/
html 判断页面加载完成,Javascript判断页面是否加载完成
weixin_31499719的博客
06-09 1353
很多时候我们在使用document.getElementById的时候直接在script标签中获取对象，然后使用，此时程序会出现该对象为undefined。vardom=document.getElementById("target");alert(dom);//undefined但是如果你把这段代码放到文档的最末尾，你再运行他的结果便不是undefined。这到底是为什么呢？这个我们要从文...
JS预加载
gzkahjl的博客
07-24 385
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-eq...
「经典题」JavaScript中的预加载—概念、作用、以及代码实现方式
王春燕的博客
04-22 2488
1.什么是预加载 资源预加载是另一个性能优化技术，我们可以使用该技术来预先告知浏览器某些资源可能在将来会被使用到。 预加载简单来说就是将所有所需的资源提前请求加载到本地，这样后面在需要用到时就直接从缓存取资源。 2.为什么要用预加载 在网页全部加载之前，对一些主要内容进行加载，以提供给用户更好的体验，减少等待的时间。 否则，如果一个页面的内容过于庞大，没有使用预加载技术的页面就会长时间的展现为一片空白，直到所有内容加载完毕。 3.实现预加载的方法有哪些？ 方法一：用CSS和JavaScri
zygote预加载类和资源
06-11
Zygote预加载类和资源是Android系统中的一个特性，它可以在应用程序启动时预加载一些常用的类和资源，从而提高应用程序的启动速度和响应性能。 具体来说，在Android系统启动时，Zygote进程会预加载一些常用的类和...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值