浏览器加载图片区别:

  • 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. BZOJ 2038 2009国家集训队 小Z的袜子【模板·莫队】

    [题解] 1,先说说莫队算法. 莫队算法是用来离线处理区间问题的算法.非常易于理解和使用,且运用十分广泛. 假设我们现在已知区间[L,R]的答案,如果我们能以较低的时间复杂度扩展得到区间$[L-1,R ...

  2. broker监控dataguard配置

    使用broker查看dataguard信息时有告警 DGMGRL> show configuration; Configuration - DRTEST Protection Mode: Max ...

  3. 实现selenium+Chrome爬取时不加载图片——配置

    # -*- coding:utf-8 -*- from selenium import webdriver ''' 设置页面不加载图片,这样可以加快页面的渲染,减少爬虫的等待时间,提升爬取效率 固定配 ...

  4. A. Treasure Hunt Codeforces 线性代数

    A. Treasure Hunt time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  5. CF #327 DIV2 D、E

    两题都不难. 对于D题,可以使用相对移动,把吹aircraft移动变成相反方向的待援点的移动.假设此时时间为t,把aircraft的速度设为Vmax,看待援点在飞船最大速度飞行t秒的范围内,注意风向变 ...

  6. 中国银联mPOS通用技术安全分析和规范解读

    mPOS是近年出现并得到迅速发展的一种新型受理产品,不少机构和生产企业进行了各种形式的试点. 因为mPOS引入了手机.平板电脑等通用智能移动设备.并通过互联网进行信息传输.因此其安全特点与传统银行卡受 ...

  7. Java基础之hashCode方法具体解释

    想要明确hashCode的作用,必须要先知道java中的集合.(不明确的请看Java基础之集合框架具体解释(二)List篇和Java基础之集合框架具体解释(三)Set篇) Java中的Collecti ...

  8. 弹出框中选项卡的运用（easyUI）

    先看一下页面效果: 此处有两个知识点:一个是弹出框的运用,一个是选项卡的运用 分析一下该HTML代码,最外面一个div是弹出框的,默认是关闭状态,可通过ID来控制弹出框的开关,该div的样式是easy ...

  9. B1295 [SCOI2009]最长距离 最短路

    就是一道最短路的裸题,直接跑spfa就行了.(spfa死了) 最后在答案处判断是否障碍物太多,然后就直接找最大值就行. (数据特别水,我错误算法60) 题干: Description windy有一块 ...

  10. poj 2288 Islands and Bridges ——状压DP

    题目:http://poj.org/problem?id=2288 状压挺明显的: 一开始写了(记忆化)搜索,但一直T: #include<iostream> #include<cs ...