图片及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 ...
随机推荐
- 如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介
如何获取用户的地理位置-浏览器地理位置(Geolocation)API 简介 一.总结 一句话总结:Geolocation API(地理位置应用程序接口)提供了一个可以准确知道浏览器用户当前位置的方法 ...
- 10.6 android输入系统_Dispatcher线程_总体框架
图解Android - Android GUI 系统 (5) - Android的Event Input System - 漫天尘沙 - 博客园.htm // 关注里面的Dispatcher处理流程h ...
- zynq mac地址修改
工作中遇到多个zynq板子同时位于一个交换机网络中,由于默认mac地址相同,无法进行通信,因此需要对每个板子修改mac地址. 方案:使用uboot配置文件 步骤: 在uboot配置文件中添加及修改下面 ...
- C#实现自己主动升级(附源代码)
对于PC桌面应用程序而言,自己主动升级功能往往是不可缺少的. 而自己主动升级能够作为一个独立的C/S系统来开发,这样,就能够在不同的桌面应用中进行复用.本文将着重介绍OAUS的相关背景. ...
- js实现点击不同的按钮后各自返回被点击的次数
js实现点击不同的按钮后各自返回被点击的次数 一.总结 1.注意:返回的不是三个按钮总的点击数,而是每一个的 2.用全局变量的话每一个按钮要多一个函数,用闭包就很方便 二.js实现点击不同的按钮后各自 ...
- Mybatis全面详解——上(学习总结)
原文地址:https://blog.csdn.net/ITITII/article/details/79969447 一.什么是Mybatis 这里借用官网的一句话介绍什么是mybatis:MyBat ...
- Canvas基础知识总结之中的一个
canvas的HTML语法: <canvas> Canvas not supported </canvas> 上面这句代码中内容部分所含的文本,这种文本的叫法"后备内 ...
- heredoc(实现模板与代码的分离)
heredoc(实现模板与代码的分离) 一.总结 heredoc实现模板与代码的分离,实现的是在后台编程语言中批量输出html代码,在这个批量输出的html代码中又可以嵌套编程语言变量.所以很方便. ...
- http各种状态码具体解释
1XX (暂时响应) 100(继续) 请求者应当继续提出请求. 101(切换协议)请求者已要求server切换协议,server已确认并准备切换 2XX(成功) ·200(成功) ser ...
- php实现表示数值的字符串(is_numeric($s))
php实现表示数值的字符串(is_numeric($s)) 一.总结 is_numeric($s) 二.php实现表示数值的字符串 题目描述 请实现一个函数用来判断字符串是否表示数值(包括整数和小数) ...