浏览器加载图片区别:

  • IE:同时加载与渲染
  • 其他:加载完之后再渲染

根据这个差异用jQuery做个实例:按顺序加载一组图片,加载完成后提示.

 <!DOCTYPE html>

 <html>

 <head>

     <meta charset="utf-8">

     <meta http-equiv="X-UA-Compatible" content="IE=edge">

     <title>顺序加载图片demo</title>

     <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>

     <link rel="stylesheet" type="text/css" href="css/style.css">

     <script type="text/javascript">

     $(function() {

         $("button").click(function() {

             $(this).css({display: 'none'});              // 隐藏按钮

             $("#imgBox").css({display: 'inline-block'}); // 显示图片区域

             //获取图片src数组

             var imgPathArr = getImgInfo();

             for (var i = 0; i < imgPathArr.length; i++) {

                 loadImg(i, imgPathArr[i], function(){

                     // 提示加载完成

                     alert("done");

                 });

             };

         });

         function loadImg(index, imgPath, callback) {

             var imgO = new Image();

             $(".a1").append(imgO);

             var temp = document.getElementById("imgBox");

             var imgt = temp.getElementsByTagName("img")[0];

             imgt.onload = function(){

                 callback();

             };

             $("img").eq(index).attr('src', imgPath);

         }

         //获取图片信息

         function getImgInfo(){

             //图片信息

             return imgInfo= [

                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/jetstrike_large.png",

                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/flightkit_large.png",

                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/metropolitan_large.png",

                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/projectileweapons_large.png",

             ];

         }

     });

     </script>

 </head>

 <body>

     <div id="imgBox">

         <div class="a1"></div>

     </div>

     <button>Click Me</button>

 </body>

 </html>

经测试,bug:

  1. IE下显示顺序乱的
  2. FF看不出...

待更新...

jQuery顺序加载图片(初版)的更多相关文章

  1. jQuery顺序加载图片(终版)

    这一篇是对上一篇(jQuery顺序加载图片(初版)--http://www.cnblogs.com/newbie-cc/p/3707504.html)的改进. function loadImage(i ...

  2. JQuery缓冲加载图片插件lazyload.js的使用方法

    lazyload.js是一个基于JQuery的插件,可以用来缓冲加载图片.如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动 ...

  3. jquery 缓冲加载图片插件 jquery.lazyload

    第一:加入jquery 第二:加入jquery.lazy.load.js文件 第三:在网页中加<script> $(document).ready(function(){ $(" ...

  4. jquery更改加载图片大小

    <script type="text/javascript"> $("img").css("width","80%&q ...

  5. JQuery实现无刷新下拉加载图片

          最近做的一个项目需要做页面无刷新下拉加载图片,调研了一番,大多都采用检测滚动条达到底部,然后利用ajax加载下一页数据对页面数据进行添加,根据这一逻辑,自己写了一个,具体代码如下: JQu ...

  6. jquery的promise实践--连续加载图片

    在javascript设计模式实践之代理模式--图片预加载中用代理模式实现了图片预加载功能. 现在就更进一步,完成一个能够一张一张的连续图片加载的功能. 功能: 1.一张一张加载图片. 2.加载错误, ...

  7. ajax-json,遇到的一个问题，jquery var ,加载顺序。JS对象，json格式转换。

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. JQuery仿淘宝滚动加载图片

    用 JQuery 制作随着显示页面的滚动条的滚动动态加载图片,适用于图片太多的页面,在访问网页时,可以先只加载第一屏要显示的图片,当用户进行向下滚动查看页面的时候,动态去加载这些图片,好处是减少页面第 ...

  9. Jquery实现逐屏加载图片

    引用jquery.scrollLoading.js $(document).ready(function () { //实现图片慢慢浮现出来的效果 $("img").load(fu ...

随机推荐

  1. 清北学堂模拟赛d2t1 一道图论神题(god)

    题目描述 LYK有一张无向图G={V,E},这张无向图有n个点m条边组成.并且这是一张带权图,只有点权. LYK想把这个图删干净,它的方法是这样的.每次选择一个点,将它删掉,但删这个点是需要代价的.假 ...

  2. [bzoj3676]回文串[后缀数组+Manacher]

    后缀数组+Manacher #include <iostream> #include <cstdio> #include <cstdlib> #include &l ...

  3. Linux 下android环境的配置

    Linux 下android环境的配置 1. JDK下载 http://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads- ...

  4. round()和trunc()函数的应用

    http://blog.chinaunix.net/uid-7801695-id-68136.html round()和trunc()函数的应用 关键字: round()和trunc()函数的应用  ...

  5. mongodb之安装

    前言 系统环境是CentOS,linux只支持64位版本 yum源安装 rpm包说明 mongodb-org-server 包含mongod进程,关联配置,初始化脚本mongodb-org-mongo ...

  6. Clojure：解决selmer模板不刷新的问题

    当在REPL环境中尝试调试template的时候,会发现每次都需要重启REPL才能看到最新的变化.调查后发现,原来是每次启动REPL的时候,原来的template文件都被放到了target目录中,这样 ...

  7. ORACLE11G设置IP訪问限制

    出于数据安全考虑,对oracle数据库的IP做一些限制,仅仅有固定的IP才干訪问. 改动$JAVA_HOME/NETWORK/ADMIN/sqlnet.ora文件 添加下面内容(红色表示凝视): #开 ...

  8. sublime text3编译C/C++系统提示丢失zlib1.dll解决的方法

    用g++ 编译C/C++程序时 出现例如以下系统提示: 解决的方法例如以下: 1.下载zlib1.dll: http://www.pc6.com/softview/SoftView_81060.htm ...

  9. luogu2765 魔术球问题 网络流

    题目大意: 假设有n根柱子,现要按下述规则在这n根柱子中依次放入编号为1,2,3,...的球.(1)每次只能在某根柱子的最上面放球.(2)在同一根柱子中,任何2个相邻球的编号之和为完全平方数.试设计一 ...

  10. arm linux串口蓝牙工具移植及使用【转】

    本文转载自:http://blog.csdn.net/hclydao/article/details/51451725 p6212中串口蓝牙在linux下的使用记录 一.linux蓝牙工具移植 主要使 ...