判断脚本,图片,CSS,iframe等是否加载完成
1.图片
<img id="MyImg" src="src"/>
jquery实现:
$("#MyImg").load(function(){
})
说明:在jquery中load方法是在对象加载完毕后触发
javascript实现:
JS判断img图片是否加载完成:使用onload或者onreadystatechange
function isImgLoad(){
if(!!window.ActiveXObject){ // IE
if(img.readyState == 'complete'){
alert('finished');
}
else{
alert('loading');
}
}
else{
// 非IE
if(img.complete == true){
alert('finished');
}
else{
alert('loading');
}
}
}
2.动态加载js,css文件
function loadjscssfile(filename,filetype){
if(filetype == "js"){
var fileref = document.createElement('script');
fileref.setAttribute("type","text/javascript");
fileref.setAttribute("src",filename);
}else if(filetype == "css"){
var fileref = document.createElement('link');
fileref.setAttribute("rel","stylesheet");
fileref.setAttribute("type","text/css");
fileref.setAttribute("href",filename);
}
if(typeof fileref != "undefined"){
document.getElementsByTagName("head")[0].appendChild(fileref);
}
}
loadjscssfile("do.js","js");
loadjscssfile("test.css","css");
3.判断iframe是否加载完成
var iframe = document.createElement("iframe");
iframe.src = "http://www.jb51.net";
if (!/*@cc_on!@*/0) { //if not IE
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
} else {
iframe.onreadystatechange = function(){
if (iframe.readyState == "complete"){
alert("Local iframe is now loaded.");
}
};
}
document.body.appendChild(iframe);
或者:
var iframe = document.createElement("iframe");
iframe.src = "http://www.jb51.net";
if (iframe.attachEvent){
iframe.attachEvent("onload", function(){
alert("Local iframe is now loaded.");
});
} else {
iframe.onload = function(){
alert("Local iframe is now loaded.");
};
}
document.body.appendChild(iframe);
转载于:https://www.cnblogs.com/peng14/p/3346144.html
判断脚本,图片,CSS,iframe等是否加载完成相关推荐
- 判断CSS与JS是否加载完毕的方法
简单而有效的思路:三步走 一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作 二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...
- js实现点击图片放大效果,以及懒加载图片
js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...
- 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
- css纯加载动画,纯CSS实现loading动画加载效果
原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...
- node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中
我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...
- HTML+CSS制作Windows启动加载动画
HTML+CSS制作Windows启动加载动画 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...
- 心形源码HTML,纯CSS实现心形加载动画(附源码)
本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...
- node.js css文件已经被加载但是无法渲染页面的问题和解决方法
问题:在使用node.js创建了一个服务器,加载html页面后css文件已经被加载但是页面没有被渲染 如图 此时已经证明了路径是没有问题的,那么问题出现在哪里? 代码如下 const fs = req ...
- CSS 3.0实现加载动画
给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...
- vue动态加载js和css以及部分页面加载特定的js和css
vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...
最新文章
- 中铁CA根证书安装不成功的解决办法
- Failed to convert property value of type java.lang.String to required type java.lang.Integer for pro
- while用法_语法||由一句译文聊聊while的用法
- python按列读取txt文件_如何使用pandas读取txt文件中指定的列(有无标题)
- 图片大_2020跨年图片 元旦快乐祝福图片 2019再见2020你好图片大全 新年图片
- HBase 基本入门篇
- 函数 getaddrinfo 学习
- 九大ICT企业年中业绩大比拼
- 《电路》邱关源 思维导图 第四章-电路定理
- 【博弈论】势博弈(potential game)、EPG以及最佳响应、Nash均衡和帕累托(pareto)最优的理解
- 学生管理系统——数据库表设计
- Spigot 算法之一 计算调和级数的和
- 所谓的进步和提升,就是完成认知升级
- 前后端分离跨域上传图片代码
- 25行代码爬取英雄联盟手游英雄皮肤图片
- C#个人博客系统源码(前台+后台管理)
- winrar命令行打自解压安装包不生效问题
- 欧框语言框架标准C2,雅思成绩与欧洲语言共同参考框架的对应关系
- 云栖大会:两万人参会 十大亮点抢先看
- 对ResNet的理解
热门文章
- 如何将项目上传到GitHub
- 分布式数据库管理系统
- Linux学习--第十三天--日志、系统运行级别、grub加密
- 当你再面对大多数需求时能够说这些问题我以前做过,那你就。。。
- Linux操作系统中,*.zip、*.tar、*.tar.gz、*.tar.bz2、*.tar.xz、*.jar、*.7z等格式的压缩与解压...
- 提交优化Oracle Tuning Log File Sync 等待事件的几种策略
- 为什么static成员的类型可以是类本身?又为什么非static成员被限定声明为其自身类对象的指针或引用?...
- Windows Phone 7 位图编程
- iOS逆向之iOSOpenDev
- 关于iptables