浏览器加载图片区别:

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

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

  1.  <!DOCTYPE html>
  2.  <html>
  3.  <head>
  4.      <meta charset="utf-8">
  5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.      <title>顺序加载图片demo</title>
  7.      <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
  8.      <link rel="stylesheet" type="text/css" href="css/style.css">
  9.  
  10.      <script type="text/javascript">
  11.      $(function() {
  12.          $("button").click(function() {
  13.              $(this).css({display: 'none'});              // 隐藏按钮
  14.              $("#imgBox").css({display: 'inline-block'}); // 显示图片区域
  15.              //获取图片src数组
  16.              var imgPathArr = getImgInfo();
  17.              for (var i = 0; i < imgPathArr.length; i++) {
  18.                  loadImg(i, imgPathArr[i], function(){
  19.                      // 提示加载完成
  20.                      alert("done");
  21.                  });
  22.              };
  23.          });
  24.  
  25.          function loadImg(index, imgPath, callback) {
  26.              var imgO = new Image();
  27.              $(".a1").append(imgO);
  28.  
  29.              var temp = document.getElementById("imgBox");
  30.              var imgt = temp.getElementsByTagName("img")[0];
  31.              imgt.onload = function(){
  32.                  callback();
  33.              };
  34.  
  35.              $("img").eq(index).attr('src', imgPath);
  36.          }
  37.          //获取图片信息
  38.          function getImgInfo(){
  39.              //图片信息
  40.              return imgInfo= [
  41.                          "https://www.videocopilot.net/assets/public/images/v6/products/boxes/jetstrike_large.png",
  42.                          "https://www.videocopilot.net/assets/public/images/v6/products/boxes/flightkit_large.png",
  43.                          "https://www.videocopilot.net/assets/public/images/v6/products/boxes/metropolitan_large.png",
  44.                          "https://www.videocopilot.net/assets/public/images/v6/products/boxes/projectileweapons_large.png",
  45.              ];
  46.          }
  47.      });
  48.      </script>
  49.  </head>
  50.  <body>
  51.      <div id="imgBox">
  52.          <div class="a1"></div>
  53.      </div>
  54.      <button>Click Me</button>
  55.  </body>
  56.  </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. CodeForcesGym 100735B Retrospective Sequence

    Retrospective Sequence Time Limit: Unknown ms Memory Limit: 65536KB This problem will be judged on C ...

  2. 创建Spark执行环境SparkEnv

    SparkDriver 用于提交用户的应用程序, 一.SparkConf 负责SparkContext的配置参数加载, 主要通过ConcurrentHashMap来维护各种`spark.*`的配置属性 ...

  3. hdu_1003_Max Sum_201311271630

    Max Sum Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) Total Su ...

  4. oracle级联操作

    在加入foreing key约束时,还能够指定级联操作的类型,主要用于确定当删除(on delete) 附表中的一条记录时,怎样处理子表中的外键字段,有例如以下三种引用类型. cascade 此key ...

  5. 【cocos2d-x 3.7 飞机大战】 决战南海I (十) 游戏主场景

    主场景要包括其它类的头文件 #include "cocos2d.h" #include "MyPlane.h" #include "Bullet.h& ...

  6. Servlet仿CSDN动态验证码的生成-带数字和字母

    林炳文Evankaka原创作品.转载请注明出处http://blog.csdn.net/evankaka 一.实现的思路: (1)首先,须要创建一个Servlet.该Servlet通过字节型响应给cl ...

  7. crm使用FetchXml分组聚合查询

    /* 创建者:菜刀居士的博客  * 创建日期:2014年07月09号  */ namespace Net.CRM.FetchXml {     using System;     using Micr ...

  8. ExtJs 给grid某一单元格重新赋值

    // 司机,搬运工提成 var commissionMoney = (waybillsFtQty * commissionMoneyRatio / personCount).toFixed(2); / ...

  9. EF + WCF学习笔记——EF实体类序列化

    项目中如果 EF + WCF 结合使用,模式应该是EF负责读取数据库,传递数据对象给WCF,WCF再将这些对象传送给客户端.因为WCF传送的对象需要序列化,而EF默认生成的对象并没有序列化,很可能会出 ...

  10. NYOJ15括号匹配

    NYOJ15括号匹配 括号匹配(二) 时间限制:1000 ms  |  内存限制:65535 KB 难度:6   描述 给你一个字符串,里面只包含"(",")" ...