浏览器加载图片区别:

  • 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. windows和linux下 Python2,Python3 的环境及安装

    目录 windows和linux下 Python2,Python3 的环境及安装 window下安装 一. 手动安装 二. pip安装 linux下 安装 更新Python 笔者有话 windows和 ...

  2. Django REST framework - 认证

    目录 认证 DRF 5种验证方式 如何确定身份验证? 设置身份验证方案 案例: 基于自定义Token认证 第一步: 定义一个用户表和一个保存用户Token的表 第二步: 定义一个登陆视图 第三步定义一 ...

  3. 53. Maximum Subarray(动态规划）

    Find the contiguous subarray within an array (containing at least one number) which has the largest ...

  4. qwb与学姐

    qwb与学姐 Time Limit: 1 Sec  Memory Limit: 128 MB Description qwb打算向学姐表白,可是学姐已经受够了他的骚扰,于是出了一个题想难住他:已知一幅 ...

  5. jxl中报表单元格合并问题

    WritableWorkbook wwb = Workbook.createWorkbook(endFileName);WritableSheet ws = wwb.createSheet(" ...

  6. data object audit

    客户提出了一个需求.想对一个表做audit. 本来这是非常简单的一个case,因为oracle自带的 audit功能就可以非常方便的实现.  实现的方式如下: BEGIN DBMS_FGA.ADD_P ...

  7. 最小生成树模板(poj3625)

    Building Roads Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 9360   Accepted: 2690 De ...

  8. 《鸟哥的Linux私房菜-基础学习篇（第三版）》（五）

    第4章 安装CentOS 5.x与多重引导小技巧        1. 本练习机的规划(尤其是分区參数)        分了四个分区: 1)/boot:primary 2)/:primary 3)/ho ...

  9. http自己定义超时检測方法、主动抛出异常

    上次为了解决无网路由器超时的问题,将问题重心转移到了HttpClient. HttpUrLConnection上面,什么各种设置ReadTimeout. connectionTimeOut,还有所谓的 ...

  10. Hadoop - YARN 启动流程

       一  YARN的启动流程                                                                 watermark/2/text/aHR ...