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等是否加载完成相关推荐

  1. 判断CSS与JS是否加载完毕的方法

    简单而有效的思路:三步走 一.显示默认提示:直接在页面上标识一个友好的提示:例如xxx,系统加载未完成,建议您刷新后再进行yy操作 二.css加载完毕:对提示内容进行处理:例如红色提示变..黄色警告 ...

  2. js实现点击图片放大效果,以及懒加载图片

    js实现点击图片放大效果,以及懒加载图片 近期有个后端管理页面小优化,原来的图片是点击才会去后端请求图片展示到前端,用dialog的方式展示,但是不太直观 存在两个问题 1.点击查看后,电子照片会变形 ...

  3. 使用HTML+CSS实现网页loading加载效果,支持定时或加载完成后隐藏

    网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...

  4. css纯加载动画,纯CSS实现loading动画加载效果

    原标题:纯CSS实现loading动画加载效果 loading动画图标的做法有很多.一般不想麻烦的人直接嵌入一张gif的动态图标即可实现!虽然该方法方便快捷,但是对网站的加载速度优化方面还不是最好,制 ...

  5. node中怎样将css导入到html,CSS无法使用Node.js加载到我的HTML代码中

    我想通过Node.js使用express()函数在localhost:3000中将CSS添加到我的HTML中. 不幸的是,有些奇怪.我一步一步按照教程中的步骤,但仍然无法加载我的CSS.我的style ...

  6. HTML+CSS制作Windows启动加载动画

    HTML+CSS制作Windows启动加载动画 效果图如下: HTML部分源代码如下: <!DOCTYPE html> <html lang="en">&l ...

  7. 心形源码HTML,纯CSS实现心形加载动画(附源码)

    本篇文章给大家介绍一下纯CSS实现心形加载动画的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. 废话不多说上代码,代码很简答,研究一下就明白了,有不明白的可以问我. .hear ...

  8. node.js css文件已经被加载但是无法渲染页面的问题和解决方法

    问题:在使用node.js创建了一个服务器,加载html页面后css文件已经被加载但是页面没有被渲染 如图 此时已经证明了路径是没有问题的,那么问题出现在哪里? 代码如下 const fs = req ...

  9. CSS 3.0实现加载动画

    给大家分享一个用CSS 3.0实现加载动画,效果如下: 以下是代码实现,欢迎大家复制.粘贴和收藏. <!DOCTYPE html> <html lang="en" ...

  10. vue动态加载js和css以及部分页面加载特定的js和css

    vue动态加载js和css以及部分页面加载特定的js和css vue项目第一次加载很慢的,发现在第一次加载要很大的js导致卡顿.可以使用cdn加速和其他gzip方式效果不是很明显.因此考虑每个页面动态 ...

最新文章

  1. 中铁CA根证书安装不成功的解决办法
  2. Failed to convert property value of type java.lang.String to required type java.lang.Integer for pro
  3. while用法_语法||由一句译文聊聊while的用法
  4. python按列读取txt文件_如何使用pandas读取txt文件中指定的列(有无标题)
  5. 图片大_2020跨年图片 元旦快乐祝福图片 2019再见2020你好图片大全 新年图片
  6. HBase 基本入门篇
  7. 函数 getaddrinfo 学习
  8. 九大ICT企业年中业绩大比拼
  9. 《电路》邱关源 思维导图 第四章-电路定理
  10. 【博弈论】势博弈(potential game)、EPG以及最佳响应、Nash均衡和帕累托(pareto)最优的理解
  11. 学生管理系统——数据库表设计
  12. Spigot 算法之一 计算调和级数的和
  13. 所谓的进步和提升,就是完成认知升级
  14. 前后端分离跨域上传图片代码
  15. 25行代码爬取英雄联盟手游英雄皮肤图片
  16. C#个人博客系统源码(前台+后台管理)
  17. winrar命令行打自解压安装包不生效问题
  18. 欧框语言框架标准C2,雅思成绩与欧洲语言共同参考框架的对应关系
  19. 云栖大会:两万人参会 十大亮点抢先看
  20. 对ResNet的理解

热门文章

  1. 如何将项目上传到GitHub
  2. 分布式数据库管理系统
  3. Linux学习--第十三天--日志、系统运行级别、grub加密
  4. 当你再面对大多数需求时能够说这些问题我以前做过,那你就。。。
  5. Linux操作系统中,*.zip、*.tar、*.tar.gz、*.tar.bz2、*.tar.xz、*.jar、*.7z等格式的压缩与解压...
  6. 提交优化Oracle Tuning Log File Sync 等待事件的几种策略
  7. 为什么static成员的类型可以是类本身?又为什么非static成员被限定声明为其自身类对象的指针或引用?...
  8. Windows Phone 7 位图编程
  9. iOS逆向之iOSOpenDev
  10. 关于iptables