判断脚本,图片,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 ...
随机推荐
- ASP.NET常用加密解密方法
ASP.NET常用加密解密方法 一.MD5加密解密 1.加密 C# 代码 public static string ToMd5(string clearString) ...
- openfl关于windows平台编译报错解决办法
报错信息: 无法打开程序数据库“e:\newproj\mainclient\bin\windows\cpp\obj\obj\msvc-debug-ncxp\vc.pdb”:如果要将多个 CL.EXE ...
- springMVC(注解版笔记)
springMVC(注解版) 较之于非注解版本,发生一下变化: 1.配置文件需要配置的标签有: <!-- 包的扫描,此包下面的所有包都启用注解 --> <context:compon ...
- Designing Evolvable Web API with ASP.NET 随便读,随便记 “The Internet,the World Wide Web,and HTTP”
1982年,诞生了 Internet; 1989年,诞生了World Wide Web . "World Wide Web"的构造为主要由 三部分构成: resources 资源 ...
- [算法] 插入排序 Insertion Sort
插入排序(Insertion Sort)是一种简单直观的排序算法.它的工作原理是通过构建有序序列,对于未排序数据,在已排序序列中从后向前扫描,找到相应位置并插入.插入排序在实现上,通常采用in-pla ...
- Longest Increasing Sequence
public class Longest_Increasing_Subsequence { /** * O(N^2) * DP * 思路: * 示例:[1,0,2,4,10,5] * 找出以上数组的L ...
- HDU-4750 Count The Pairs 最小生成树,并查集
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4750 题意:Q个询问t,求在一个无向图上有多少对点(i,j)满足 i 到 j 的所有路径上的最长边的最 ...
- librtmp推流使用aac编码音频的html5和flash播放问题
公司项目中使用rtmp推流,音频编码aac.视频编码H264.windows和android平台都没有发现问题.然而在IOS版本的APP中发现几个问题:1. 推流后flash播放异常2. IOS平台微 ...
- DBMS_ERRLOG记录DML错误日志(二)
上一篇简单介绍了DML记录语句的限制,虽然所有的例子都是利用INSERT语句,但是LOG ERRORS语句并没有这个限制,UPDATE.DELETE和MERGE都可以使用这个语句.下面要说的就是这篇的 ...
- Linux上svn服务器的搭建
安装svn服务器 直接用yum安装,命令如下: #yum install -y subversion 验证是否安装成功. #svnserve --version 创建SVN版本库 在home目录下创建 ...