图片及js的预加载
loadImage : function (url, dataObj, callback, errorCallback) {
var self = this;
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img,dataObj);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img,dataObj);//将回调函数的this替换为Image对象
};
if(typeof errorCallback === 'function'){
img.onerror = function () {
errorCallback.call(img,dataObj);
};
}
}
function loadScript(url, callback){
var script = document.createElement ("script")
script.type = "text/javascript";
if (script.readyState){ //IE
script.onreadystatechange = function(){
if (script.readyState == "loaded" || script.readyState == "complete"){
script.onreadystatechange = null;
callback();
}
};
} else { //Others
script.onload = function(){
callback();
};
}
script.src = url;
document.getElementsByTagName_r("head")[0].appendChild(script);//即插即执行
}
你可以在页面中动态加载很多JavaScript 文件,但要注意,浏览器不保证文件加载的顺序(修正:加载应该是异步同时加载,执行顺序是不确定的,很可能谁先加载完,先执行谁。)。所有主流浏
览器之中,只有Firefox 和Opera 保证脚本按照你指定的顺序执行。其他浏览器将按照服务器返回它们的次
序下载并运行不同的代码文件。你可以将下载操作串联在一起以保证他们的次序,如下:
loadScript("file1.js", function(){
loadScript("file2.js", function(){
loadScript("file3.js", function(){
alert("All files are loaded!");
});
});
});
javascript 动态加载按顺序加载运行 js
图片及js的预加载的更多相关文章
- 图片预加载 js css预加载
图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden"> <script type= ...
- 图片利用 new Image()预加载原理 和懒加载的实现原理
二:预加载和懒加载的区别 预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看 ...
- Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)
之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...
- nuxt 优化项:禁用js的预加载
这里有个nuxt和vue不同的地方,这个地方很有意思,官方的中文文档说得蜜汁自信 ------------------------------- In production, nuxt.js uses ...
- 图片,音频资源预加载和文档dom加载
在项目中遇到一个问题,ajax请求音频资源,然后动态的插入到文档中,其中.原生的音频外观实在太丑了,而且每个浏览器的样式都不一样,采取了一个audio插件. 就遇到一个问题,请求后的直接调用插件的话, ...
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
- Javascript图片预加载详解
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 利用CSS、JavaScript及Ajax实现图片预加载的三大方法
预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...
- 图片预加载和AJAX的图片预加载
利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...
随机推荐
- (6)uboot具体解释——关闭缓存和mmu
uboot具体解释--关闭缓存和mmu 当设置完时钟分频以后,uboot就会运行cpu_init_crit汇编函数,这个函数的主要作用就是关闭缓存和mmu.然后调用lowlevel_init函数进行系 ...
- python opencv3 —— 常用工具、辅助函数、绘图函数(图像添加文本、矩形等几何形状)
1. cv2.hconcat().cv2.vconcat() 将从摄像头捕获的多个图像帧,横向(cv2.hconcat)或纵向(cv2.vconcat)拼接到一起,使得可以在一个 window 中进行 ...
- 关于浏览器不能执行JavaScrip问题的反思
今天在一篇博客(http://blog.csdn.net/u011043843/article/details/27959563)的时候,写着用于演示的Javascript代码不能再浏览器执行,非常是 ...
- libSVM介绍(二)
鉴于libSVM中的readme文件有点长,并且,都是採用英文书写,这里,我把当中重要的内容提炼出来,并给出对应的样例来说明其使用方法,大家能够直接參考我的代码来调用libSVM库. 第一部分,利用l ...
- 小型机与pc服务器区别
按CPU的类型来区分,小型机是基于RISC(精简指令集)架构的专用服务器,而服务器是基于CISC(复杂指令集)架构的PC服务器.小型机相对于普通服务器来说,一直有不可比拟的优势.(1)如必能稳定,它具 ...
- or小计
1.使用or的时候,必须养成两边添加括号,否则结果完全不一样. 2.or条件如果复杂的情况下,可以适当考虑union all改写.
- 8、hzk16的介绍以及简单的使用方法
HZK16 字库是符合GB2312标准的16×16点阵字库,HZK16的GB2312-80支持的汉字有6763个,符号682个.其中一级汉字有3755个,按 声序排列,二级汉字有3008个,按偏旁部首 ...
- 25、写一个USB摄像头驱动程序(有ioctrl分析)
videobuf2-core.h中的vb2_buffer,记录了v4l2_buffer ,驱动可以对vb2_buffer的v4l2_buffer进行操控, vb2_buffer是v4l2框架层的代码, ...
- PWA之消息推送——Notification
原文 简书原文:https://www.jianshu.com/p/69042b92cae1 大纲 1.推送通知的概念 2.消息推送的知识点 3.实例 1.推送通知的概念 大部分现代 Web 应用都需 ...
- hadoop一些常见报错的解决方式
Failed to set setXIncludeAware(true) for parser 遇到此问题通常是jar包冲突的问题. 一种情况是我们向java的lib文件夹加入我们自己的jar包导致h ...