jquery懒加载图片的插件 jquery懒加载图片的插件

jquery有一个比较有名的插件实现页面的懒加载，jquery.lazyLoad.js。

需求是:直接从网络下载图片到本地做一个缓存，然后以后打开图片的时候可以直接读取缓存中的文件，即使没有网络也访问正常。对于页面有多张图片的话，只显示一屏里面的图片，拖动滚动条显示新的图片。

文件下载，和懒加载都有现成的代码，但是没有结合在一起的。于是，就做了一下小小的改动。

$.addCache = function(t, c) {

                if (t.gc)// 如果已经存在过，就直接返回

                        return false;

                var elct = t;

                c = $.extend({

                        url : 'http://WWW.XXX.com/upload/download.jsp?pId=$$',

                        dirName : "com.hvming.mobile/download/",

                        fileMode : "testtest$$.jpg",

                        prop : 'sourceId',

                        prep : 'loading.jpg'

                }, c);

 

jQuery 图片预加载就这么简单，有图片预加载可做出更好的用户体验

代码如下

(function($) {
  var cache = [];
  // Arguments are image paths relative to the current page.
  $.preLoadImages = function() {
    var args_len = arguments.length;
    for (var i = args_len; i--;) {
      var cacheImage = document.createElement('img');
      cacheImage.src = arguments[i];
      cache.push(cacheImage);
    }
  }


jQuery.preLoadImages("image1.gif", "/path/to/image2.png");