浏览器加载图片区别:

  • 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. Thinkphp5跨域问题

    关于代码分离可能会遇到json传输接收不到的问题(可能00) 起初我百度到解决此问题可以用jsonp来发送并接受,可是这只是一时之计 以后也会不方便所以我发现了一下方法 在app顶层创建文件commo ...

  2. Master Nginx(6) - The Nginx HTTP Server

    Nginx's architecture The HTTP core module The server Logging Finding files Name resolution Client in ...

  3. 本地数据文件加载到hive表

    1.在test数据库下创建表格 hive> create table vod_record_all( > watch_time date, > device_id string, & ...

  4. F2BPM 开发Api与RESTfull应用服务Api 层次关系及示例

    目前越来越多的企业架构解决方案更加趋向于基于http协议“微服务”访问跨系统调用,而不使用统传的WebService调用,即通过RESTfull方式进行交互,更加轻量整合调用更加方便.本文档中所有F2 ...

  5. hibernate使用c3p0数据源

    在配置好hibernate连接数据库环境的前提下,我们进行例如以下操作就能够搭建好hibernate中使用c3p0数据源的环境了. 1). 导入 jar 包: hibernate-release-4. ...

  6. NS3网络仿真（2）：first.py

    1    安装基本模块 11  安装Python 12  安装PTVS 13  加入对python-279的支持 2    在vs2013下编译NS3 3    编译NetAnim 4    在vs2 ...

  7. mongoDB学习笔记——安装及启动

    WINDOWS环境下: 一.安装 步骤一:  下载MongoDB  url下载地址:  http://downloads.mongodb.org/win32/ 步骤二:  设置MongoDB程序存放目 ...

  8. oc57--Category 分类

    // // main.m // Category基本使用:1.不修改类而扩充类.2.对于一个庞大的类,分模块开发. #import <Foundation/Foundation.h> #i ...

  9. linux下获取按键响应事件【转】

    本文转载自:https://my.oschina.net/u/157503/blog/91548 1.问题 通过一个死循环将读取键盘对应的设备文件将触发键盘事件在屏幕上打印出来,按esc退出程序 代码 ...

  10. B1800 [Ahoi2009]fly 飞行棋 数学模拟

    20分钟一遍AC,大水题,我的算法比较复杂,但是好理解,就是找可以凑出来一半周长的点来暴力枚举就行了. 题干: Description 给出圆周上的若干个点,已知点与点之间的弧长,其值均为正整数,并依 ...