如何停止预加载？答案

【问题标题】：How can i stop preloading?如何停止预加载？
【发布时间】：2012-01-24 18:57:51
【问题描述】：

我正在使用下面的函数在我的 ajax 页面上预加载图像。我的页面包含图片库。但是当我单击另一个画廊链接时，我需要停止预加载当前画廊。有什么帮助吗？谢谢...

已经解决了...这是带有示例的工作代码...

<html>
<head>
<script type="text/javascript">

(function($) {
    imgList = [];
    $.extend({
        preload: function(imgArr, option) {
            var setting = $.extend({
            init: function(loaded, total) {},
            loaded: function(img, loaded, total) {},
            loaded_all: function(loaded, total) {},
            cancel: function() {}
        }, option);
            setting.cancel(imgList);
            var total = imgArr.length;
            var loaded = 0;
            setting.init(0, total);
            for(var i in imgArr) {
                imgList.push($("<img />")
                .attr("src", imgArr[i])
                .load(function() {
                    var loadedImg=$("img[src='"+$(this).attr("src")+"']");
                    if(loadedImg.attr("width")==undefined){
                        $("img[src='"+$(this).attr("src")+"']").attr({
                          width: this.width,
                          height: this.height
                        });
                    };
                    loaded++;
                    setting.loaded(this, loaded, total);
                    if(loaded == total) {
                        setting.loaded_all(loaded, total);
                        imgList = [];
                    };
                })
            );
        }
        }
    });
})(jQuery);    

function preload(arr,preloaderFunc,preloaderCompleteFunc){
    $.preload(arr, {
        init: function(loaded, total) {
            var percent=(100/total)*loaded;
            eval(preloaderFunc+"("+percent+")");
        },
        loaded: function(img, loaded, total) {
            var percent=(100/total)*loaded;
            eval(preloaderFunc+"("+percent+")");
        },
        loaded_all: function(loaded, total) {
           eval(preloaderCompleteFunc+"()")
        },
        cancel: function(imgList) {
            if(imgList.length>0){ 
                for(var i in imgList) {
                    console.log("remove:"+imgList[i])
                       imgList[i].unbind("load").remove();
                }
                imgList  = [];
            };
        }
    }); 
};

function preloader(percent){
   $(".loaderBar").stop().animate({ "width" : percent+"%" }, 500)
};

function initPreloadImgs(){
    if($('.preloadImgs').length != 0) {
       $('.preloadImgs').not(".preloadImgs-ok").each(function(index) {
            $(this).addClass("preloadImgs-ok");
            var preloaderFunc=hasClassVal($(this),"preloaderFunc:");
            var preloaderCompleteFunc=hasClassVal($(this),"preloaderCompleteFunc:");
            clearClass($(this),"preloaderFunc:");
            clearClass($(this),"preloaderCompleteFunc:");
            var preloadThem=[];
            $('.preloadImgs').find("img").each(function(){
                preloadThem.push($(this).attr("src"));
            });
            if(preloadThem.length==0){
                eval(preloaderCompleteFunc+"()");
            }else{
                preload(preloadThem,preloaderFunc,preloaderCompleteFunc);
            };
       });
    };
};

function preloaded(){
   $(".main").fadeIn(1000);
};

function hasClassVal(obj,val){
     var classes=$(obj).attr("class")!=undefined?$(obj).attr("class").split(" "):"";
     var valLength=val.length;
     var getVal=""
     for(var i in classes){ 
         var optz=classes[i];
         if(optz.length>valLength){        
           if(optz.substr(0,valLength) == val){
               getVal = optz.substr(valLength);
               break;
           };
         };
     };
     return getVal;
};

</script>
</head>
<body>
   <div class="loader"><div class="loaderBar"></div></div>
   <div class="main preloadImgs preloaderFunc:preloader preloaderCompleteFunc:preloaded" style="display:none;">
      <img src="assets/001.jpg"/>
      <img src="assets/002.jpg"/>
      <img src="assets/003.jpg"/>
   </div>
</body>
</html>

【问题讨论】：

标签： jquery image preloading

【解决方案1】：

您所能做的就是释放现有的图像参考。是否丢弃正在进行的图像请求将取决于浏览器的内部实现。清除事件处理程序至少会阻止您在加载图像时对其进行处理。您可以通过向对象添加cancel() 方法来清除所有引用，如下所示：

cancel: function() {
    for (var i = 0; i < imgList.length; i++) {
        // clean up any jQuery data and event handlers associated with this object
        imgList[i].remove();
    }
    // clear out the imgList so all former array elements can be garbage collected
    imgList = [];
}

【讨论】：

我很确定您不必执行.unbind()。致电.remove() 应该会为您解决这个问题。
另外，你真的不应该在数组上使用for (var i in imgList) 形式。它迭代了一个对象的所有属性，它可以包括除了数组元素之外的东西。应该使用直接数组索引来迭代数组，以仅使用for (var i = 0; i < array.length; i++) 或更新的.foreach() 获取数组值。

【解决方案2】：

如果将加载器放在一个类中，则可以在单击链接时创建一个加载器。任何以前的加载器都可以获得一个告诉它停止加载的属性。

类似这样的：

function Loader(gallery)
{
  this.terminated = false;

  this.load = function()
  {
    // Loading code.
    for (loop condition)
    {
      // break if this.terminated becomes true.
    }
  }
}

var loader = null;
function preloadGallery(gallery)
{
  // Tell the previous one to stop.
  if (loader !== null)
    loader.terminated = true;
  // Start the new one.
  loader = new Loader(gallery);
}

顺便说一句，在我看来，您使用的预加载技术与通常不同。看看this page。

【讨论】：