网页图片预加载

正常情况下，网页加载图片会从上到下像"瀑布"一样加载出来，而预加载就是等所有图片加载完毕后一次性将图片显示出来，提高了页面加载速度与用户体验。
如果页面使用了在用户交互后才显示的图片，有必要进行预加载：

$.preloadImages = function () {
  for (var i = 0; i < arguments.length; i++) {
    $('img').attr('src', arguments[i]);
  }
};
$.preloadImages('img/hover-on.png', 'img/hover-off.png');

当页面加载大量图片时经常会出现白页，我们可以提高服务器性能，使用静态缓存等手段来加快图片加载速度；下面介绍一种在实际应用中经常用到的js预加载方法：在图片标签处做处理

$('img[data]').load(function() { 
  var __this__ = $(this); 
  var url = __this__.attr('data'); 
  var src = __this__.attr('src'); 
  // 如果图片地址不存在或者已经加载,不做处理
  if (url ==''|| url == src) { 
    return; 
  } 
  var img =newImage();
  // 加载将要显示的图片 
  img.src = url;
  // 如果图片已经加载到缓存,直接处理
  if(img.complete) { 
    // 替换将要显示的图片
    __this__.attr('src',url);
    return; 
  } 
  // 图片加载完成再做处理 
  img.onload =function() {
    __this__.attr('src',url); 
  } 
});

如果需要在页面初始加载时显示加载进度，在图片很多的情况下可以使用第三方插件jquery.imgpreload.min.js如下

// 在全局范围内改变或重写默认设置的imgpreload方法
$.fn.imgpreload.defaults =
{
    each: null // callback invoked when each image is loaded
    , all: null // callback invoked when all images have loaded
};
// 在标签加载完成后预加载图片
$('#content img').imgpreload(function() {
    // callback invoked when all images have loaded
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
});
$('img.logos').imgpreload ({
    each: function()
    {
        // callback invoked when each image is loaded
        // this = dom image object
        // check for success with: $(this).data('loaded')
    },
    all: function()
    {
        // callback invoked when all images have loaded
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
    }
});
// 在标签加载前预加载图片,在文档头部必须使用特定路径
$.imgpreload('/images/a.gif',function()
{
    // callback invoked when all images have loaded
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
});
$.imgpreload(['/images/a.gif','/images/b.gif'],function()
{
    // this = array of dom image objects
    // check for success with: $(this[i]).data('loaded')
    // callback executes when all images are loaded
});
$.imgpreload(['/images/a.gif','/images/b.gif'],
{
    each: function()
    {
        // callback invoked when each image is loaded
        // this = dom image object
        // check for success with: $(this).data('loaded')
    },
    all: function()
    {
        // callback invoked when all images have loaded
        // this = array of dom image objects
        // check for success with: $(this[i]).data('loaded')
    }
});

jquery.imgpreload的实际使用有两种方式如下

var imgNum = 0;
var images = [];
$(function(){ 
  preloadImg(); 
});
 
function preLoadImg() {
  // 第一种方式:获取页面中所有img,包括标签和css中的background-image;
  var imgs = document.images;
  for (var i = 0; i < imgs.length; i++) {
    images.push(imgs[i].src);
  }
  var cssImages = getallBgimages();
  for (var j = 0; j < cssImages.length; j++) {
    images.push(cssImages[j]);
  }*/

  // 第二种方式:把所有网页图片文件预先放入一个数组里;
  $.imgpreload(['images/bg1.jpg', 'images/bg2.jpg'], function () {
    //此处是显示进度百分比时需要用到的背景图，这个可以先加载进去
  });
  //then push all other images in array to load 
  images.push("images/test_1.png");
  images.push("images/test_2.png");
  images.push("images/test_3.png");
  images.push("images/test_n.png"); 
 
  $.imgpreload(images, {
    each: function () {
    /*this will be called after each image loaded*/
    var status = $(this).data('loaded') ? 'success' : 'error';
    if (status == "success") {    
      var v = (parseFloat(++imgNum) / images.length).toFixed(2);
      $("#percentShow").html(Math.round(v * 100) + "%");    
    }
  },
  all: function () {
   /*this will be called after all images loaded*/
   $("#percentShow ").html("100%");
 
   $("percentShow").fadeOut(1000);   
   $(".main").show();
  }
  });
}

// 该方式引用自其它博客,仅供借鉴
function getallBgimages() {
  var url, B = [], A = document.getElementsByTagName('*');
  A = B.slice.call(A, 0, A.length);
  while (A.length) {
    url = document.deepCss(A.shift(), 'background-image');
    if (url) url = /url\(['']?([^")]+)/.exec(url) || [];
    url = url[1];
    if (url && B.indexOf(url) == -1) B[B.length] = url;
  }
  return B;
}
 
document.deepCss = function (who, css) {
  if (!who || !who.style) return '';
  var sty = css.replace(/\-([a-z])/g, function (a, b) {
    return b.toUpperCase();
  });
  if (who.currentStyle) {
    return who.style[sty] || who.currentStyle[sty] || '';
  }
  var dv = document.defaultView || window;
  return who.style[sty] ||
  dv.getComputedStyle(who, "").getPropertyValue(css) || '';
}
 
Array.prototype.indexOf = Array.prototype.indexOf ||
  function (what, index) {
    index = index || 0;
    var L = this.length;
    while (index < L) {
    if (this[index] === what) return index;
    ++index;
  }
  return -1;
}