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的预加载的更多相关文章

  1. 图片预加载 js css预加载

    图片预加载, 效果非常明显, 特别是有多个图, 方法很简单 , 体验提升了不少 <div class="hidden">        <script type= ...

  2. 图片利用 new Image()预加载原理 和懒加载的实现原理

    二:预加载和懒加载的区别 预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前,提前加载图片.当用户需要查看 ...

  3. Android 加载gif图片强大框架(支持预加载、缓存,还支持显示静态图片,一行代码全搞定)

    之前项目中没有涉及到显示gif图片的功能,也没有着重研究过,最近项目中要用到显示gif图片,于是就在网上一顿搜,用过之后发现如下几个缺点. 1.加载大的gif图片会出现oom. 2.没有预加载和缓存功 ...

  4. nuxt 优化项:禁用js的预加载

    这里有个nuxt和vue不同的地方,这个地方很有意思,官方的中文文档说得蜜汁自信 ------------------------------- In production, nuxt.js uses ...

  5. 图片,音频资源预加载和文档dom加载

    在项目中遇到一个问题,ajax请求音频资源,然后动态的插入到文档中,其中.原生的音频外观实在太丑了,而且每个浏览器的样式都不一样,采取了一个audio插件. 就遇到一个问题,请求后的直接调用插件的话, ...

  6. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  7. Javascript图片预加载详解

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  8. 利用CSS、JavaScript及Ajax实现图片预加载的三大方法

    预加载图片是提高用户体验的一个很好方法.图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度.这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布 ...

  9. 图片预加载和AJAX的图片预加载

    利用js实现图片预加载,加载所需要图片的路径与名称即可,很容易实现,该方法尤其适用预加载大量的图片: <div class="hidden"> <script t ...

随机推荐

  1. Java Timer TimerTask Example(java Timer的例子)

    Java java.util.Timer is a utility class that can be used to schedule a thread to be executed at cert ...

  2. Thread Safety in Java(java中的线程安全)

    Thread Safety in Java is a very important topic. Java provide multi-threaded environment support usi ...

  3. Linux高性能server编程——系统检測工具

    系统检測工具 tcpdump tcpdump是一款经典的抓包工具,tcpdump给使用者提供了大量的选项,泳衣过滤数据报或者定制输出格式. lsof lsof是一个列出当前系统打开的文件描写叙述符的工 ...

  4. AE中地图查询方式

    樱木 原文 AE中地图查询方式 地图查询主要有两种查询:空间查询和属性查询 所用到知识点: 1  Cursor(游标)对象 本质上是一个指向数据的指针,本身不包含数据内容,提供一个连接到ROW对象或者 ...

  5. iOS开发之Quarz2D:九:图形上下文矩阵操作

    #import "VCView.h" @implementation VCView - (void)drawRect:(CGRect)rect { // Drawing code ...

  6. Lucene学习总结之六:Lucene打分公式的数学推导 2014-06-25 14:20 384人阅读 评论(0) 收藏

    在进行Lucene的搜索过程解析之前,有必要单独的一张把Lucene score公式的推导,各部分的意义阐述一下.因为Lucene的搜索过程,很重要的一个步骤就是逐步的计算各部分的分数. Lucene ...

  7. QAtomicInt支持四种类型的操作,Relaxed、Acquired、Release、Ordered

    Memory Ordering   Background 很久很久很久以前,CPU忠厚老实,一条一条指令的执行我们给它的程序,规规矩矩的进行计算和内存的存取. 很久很久以前, CPU学会了Out-Of ...

  8. new File(String Path)加载资源问题

    2017-12-17   15:07:38  [原创-wx] 一.我们在用IO流加载资源的时候,创建文件资源 1 File file = New File("String Path" ...

  9. [tmux] Customize tmux with tmux.conf

    You can modify tmux's behavior with your tmux configuration file, .tmux.conf. You can use your tmux ...

  10. 利用PS把多张psd格式的图片转换为一张PDF格式

    最近为公司做了一版电子样册,所有图片都是包含多图层高清晰的psd格式,要做成一个PDF文件的电子样册,发给客户看,面对这些零散的图片,本来打算利用在线合成:在线网址 https://smallpdf. ...