判断脚本,图片,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);
判断脚本,图片,CSS,iframe等是否加载完成的更多相关文章
- JS脚本文件的位置对页面加载性能影响以及无阻塞脚本(javascript)模式
JS的阻塞特性:当<script>出现的时候,页面必须等待脚本文件的加载.解析.执行完毕后才能继续进行页面的渲染.不管脚本文件是以内联形式还是外部引入的形式出现在<script> ...
- 使用jquery插件实现图片延迟加载技术(懒加载)
有时我们看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对 ...
- 性能优化-css,js的加载与执行
前端性能优化 css,js的加载与执行 javascript是单线程的 一个网站在浏览器是如何进行渲染的呢? html页面加载渲染的过程 html渲染过程的一些特点 顺序执行,并发加载 词法分析 并发 ...
- 网页加载速度优化2--先加载css,然后再加载js文件。
网页加载时,是按从上到下,从左到右的顺序加载的.所以一定要先加载css文件(不要让用户看到一个杂乱无章的页面),最后再加载js文件,js一般都是处理功能的,所以不需要提前加载.先给用户观感,再给用户上 ...
- 在.NET MVC下不用iframe实现局部加载html
最近在做个后台系统,之前都是用iframe来实现加载内容,左侧菜单不刷新.但一直不喜欢这种方法,有许多弊端.今天自己在网上查找了一番后找到了比较好的替代方案: 一.利用html的锚点标记来实现无刷新页 ...
- js不需要知道图片宽高的懒加载方法(经过实际测试,不加宽高仍然是无法正常加载的,设置height:auto,height:100%,仍然显示高度为0)
js不需要知道图片宽高的懒加载方法 懒加载是如何实现的? - 简书https://www.jianshu.com/p/e86c61468285找到一个不需要知道图片宽高的懒加载方法了(经过实际测试,不 ...
- 180729-Quick-Task 动态脚本支持框架之任务动态加载
Quick-Task 动态脚本支持框架之任务动态加载 前面几篇博文分别介绍了整个项目的基本架构,使用说明,以及整体框架的设计与实现初稿,接下来则进入更细节的实现篇,将整个工程中核心实现捞出来,从为什么 ...
- IE下iframe不能正常加载,显示空白
下午帮忙看了一个web问题,index.html中嵌入<iframe>来加载同文件目录下的一个页面,在多个浏览器下测试,发现IE浏览器中会出现问题,<iframe>不能正常加载 ...
- 使用css实现loading的加载
使用css实现loading的加载的效果图 html代码 <div id="caseVerteClaire"> <div id="transform&q ...
随机推荐
- Unity3d 基于物理渲染Physically-Based Rendering之specular BRDF
在实时渲染中Physically-Based Rendering(PBR)中文为基于物理的渲染它能为渲染的物体带来更真实的效果,而且能量守恒 稍微解释一下字母的意思,为对后文的理解有帮助,从右到左L为 ...
- mapreduce优化总结
集群的优化 1.合理分配map和reduce任务的数量(单个节点上map任务.reduce任务的最大数量) 2.其他配置 io.file.buffer.size hadoop访问文件的IO操作都需要通 ...
- 【跟我一起学Python吧】python学习摘要
开始靖,怒推一篇文章:码农平时应该注意的办公室礼节 学习一门脚本语言是很有必要的,当我们在开发一些简单,快速程序时,脚本语言便有了用武之地,而且还很給力.根据python的介绍,python是一门很简 ...
- LyX转Word
写毕业论文是一件非常繁锁的事情,一大堆的图片.公式都要往上贴,有时弄不好就把编号搞错了,有时可能没注意,一不小心字体格式.版面格式又全乱了.怎么办?--其实这只是在word环境下才会有的烦恼. 对于w ...
- Codeforces 375
A 7的所有的余数都可以用1,6,8,9排列得到,然后搞一下就可以了. B 可以用类似于单调队列的东西搞.具体看代码: /* * Problem: B. Maximum Submatrix 2 * A ...
- Linux虚拟机创建后如何进行登录(Windows Azure)
Linux虚拟机创建后如何进行登录 若要管理虚拟机的设置以及在其上运行的应用程序,可以使用安全外壳 (SSH) 客户端.为此,您必须在计算机上安装要用于访问虚拟机的 SSH 客户端.您可以选择很多 S ...
- 成都Uber优步司机奖励政策(3月5日)
滴快车单单2.5倍,注册地址:http://www.udache.com/ 如何注册Uber司机(全国版最新最详细注册流程)/月入2万/不用抢单:http://www.cnblogs.com/mfry ...
- Web Service学习之八:Soap消息详解
一.区别概念 WSDL是网络服务描述语言,是XML文档:它包含一系列描述某个web service的定义或者说是规则.尤其是定义了传输Sope消息的结构 Soap:简单对象访问协议,是交换数据的一种协 ...
- SpringMVC+Spring+Hibernate+Maven+mysql整合
一.准备工作 1.工具:jdk1.7.0_80(64)+tomcat7.0.68+myeclipse10.6+mysql-5.5.48-win322. 开发环境安装配置.Maven项目创建(参考:ht ...
- HDU 5826 physics (积分推导)
physics 题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=5826 Description There are n balls on a smoo ...