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);

判断脚本,图片,CSS,iframe等是否加载完成的更多相关文章

  1. JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式

    JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...

  2. 使用jquery插件实现图片延迟加载技术(懒加载)

    有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...

  3. 性能优化-css,js的加载与执行

    前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...

  4. 网页加载速度优化2--先加载css,然后再加载js文件。

    网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...

  5. 在.NET MVC下不用iframe实现局部加载html

    最近在做个后台系统,之前都是用iframe来实现加载内容,左侧菜单不刷新.但一直不喜欢这种方法,有许多弊端.今天自己在网上查找了一番后找到了比较好的替代方案: 一.利用html的锚点标记来实现无刷新页 ...

  6. js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)

    js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...

  7. 180729-Quick-Task 动态脚本支持框架之任务动态加载

    Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么 ...

  8. IE下iframe不能正常加载,显示空白

    下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...

  9. 使用css实现loading的加载

    使用css实现loading的加载的效果图 html代码 <div id="caseVerteClaire"> <div id="transform&q ...

随机推荐

  1. 马上着手开发Mac应用程序

    你是否想要开发 Mac 应用程序却又不知道从哪里入手?本路线图提供了 Mac 应用程序开发的绝佳起点,即使你已经是一个 iOS 开发专家,本路线图对你依然适用.Apple让开发应用程序和提交应用程序到 ...

  2. flashback database 基本介绍一

    flashback database 整个架构包括一个进程recover writer (rvwr)后台进程,flashback database log 日志和flash recovery area ...

  3. ORA-15124 数据库启动阶段报错

    重新进行启动数据库的时候报错: SQL> startup nomount; ORA-15124: ASM file name '+KEL/ipap/controlfile/control02.c ...

  4. 网站繁简切换的JS遇到的一个BUG

    公司打算进入台湾市场,最近开发了繁体版本的网站,数据库里的信息全是简体,除了网页上固定的文字手动翻译了,文章内容标题都不是繁体. 于是在网上找了一段比较流行的繁简切换的JS实现了,不过后来却发现,有些 ...

  5. 结合Vim ghostscript 将源代码文件转换成语法高亮的pdf格式文档

    step 1: 安装ghostscript (debian 环境, 其他环境自行google) sudo apt-get install ghostscript step 2:  用Vim生成ps文件 ...

  6. Camera图片特效处理综述(Bitmap的Pixels处理、Canvas/paint的drawBitmap处理、旋转图片、裁截图片、播放幻灯片浏览图片<线程固定时间显示一张>)

    一种是直接对Bitmap的像素进行操作,如:叠加.边框.怀旧.(高斯)模糊.锐化(拉普拉斯变换). Bitmap.getPixels(srcPixels, 0, width, 0, 0, width, ...

  7. Trail: JDBC(TM) Database Access(2)

    package com.oracle.tutorial.jdbc; import java.sql.CallableStatement; import java.sql.Connection; imp ...

  8. TCL/Expect交互式自动化测试概要 - - ITeye技术网站

    TCL/Expect交互式自动化测试概要 - - ITeye技术网站 expect是一种基于TCL,能与交互式程序进行"可程序化"会话的脚本语言,是一种可以提供"分支和嵌 ...

  9. 转载-清除Linux中MySQL的使用痕迹~/.mysql_history

    原文地址:清除Linux中MySQL的使用痕迹~/.mysql_history 作者:RogerZhuo 原贴:http://bbs.chinaunix.net/thread-3676498-1-1. ...

  10. 第二百九十五天 how can i 坚持

    买了个小米电话卡,写的让周六日送,非得今天给送来,浪费了1块钱.买回来还没法激活,这.. 昨天差点挂掉,今天感觉好多了,不过今天好冷,回来快冻死了. 今天啊,年终奖订下来了,没有想象的高 啊,有点小失 ...