浏览器加载图片区别:

  • 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. C#学习笔记_11_方法的隐藏和重写

    11_方法的隐藏和重写 方法的隐藏 需要使用到关键字:new 方法的重写 虚函数: 使用关键字virtual修饰的函数 虚函数可以被子类隐藏,也可以被子类重写 非虚函数只能被子类隐藏 关键字:over ...

  2. 3.1 一个简单的Java应用程序

        如下一个最简单的应用程序,它将只发送一条消息到控制台窗口中: package myjavapp;   public class FirstSample {       public stati ...

  3. 2.1 Java开发工具包

        Java专业术语                   术语名   缩写                                                             ...

  4. bupt summer training for 16 #2 ——计算几何

    https://vjudge.net/contest/171368#overview A.一个签到题,用叉积来判断一个点在一条线的哪个方向 可以二分,数据范围允许暴力 #include <cst ...

  5. Beetl学习总结（2）——基本用法

    2.1. 安装 如果使用maven,使用如下坐标 <dependency> <groupId>com.ibeetl</groupId> <artifactId ...

  6. JPA学习(基于hibernate)

    参考博客:https://blog.csdn.net/baidu_37107022/article/details/76572195 常用注解: https://blog.csdn.net/eastl ...

  7. C - 剪花布条

    一块花布条,里面有些图案,另有一块直接可用的小饰条,里面也有一些图案.对于给定的花布条和小饰条,计算一下能从花布条中尽可能剪出几块小饰条来呢?  Input输入中含有一些数据,分别是成对出现的花布条和 ...

  8. A - Number Sequence

    Given two sequences of numbers : a11, a22, ...... , aNN, and b11, b22, ...... , bMM(1 <= M <= ...

  9. 洛谷 P1491 集合位置

    P1491 集合位置 题目描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的 ...

  10. HDU 5293

    树上DP题. 其实有点类似于01的问题.方程很容易想到.首先,因为一条链的节点其实都是在树上的,所以很容易想到应该先求一个LCA.然后,当某节点不是链的LCA时,它的转移就是: dp[i]=sum[i ...