どのようにプリロードを停止できますか？

以下の関数を使用して、自分の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>

出典

2011-12-20 Salt Hareket

解決しています。機内の画像リクエストを削除するかどうかは、ブラウザの内部実装次第です。イベントハンドラをクリアすると、少なくとも画像がロードされている間は処理が中断されます。あなたはこのようなあなたのオブジェクトに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 = []; 
}

出典

2011-12-20 21:01:20 jfriend00

ありがとう、それは動作します!!! ...私の改訂された質問のコードを見ることができます。 –

あなたは '.unbind（）'をする必要はないと確信しています。 '.remove（）'の呼び出しはあなたのためにそれを処理する必要があります。 – jfriend00

ok、そうです。ありがとう... –

あなたはクラスでローダーを入れた場合は、リンクをクリックしたときに、あなたがロードさを作成することができます。以前のローダは、ロードを停止するように指示するプロパティを取得できます。このような

何か：

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をご覧ください。

出典

2011-12-20 21:02:02 GolezTrol

どのようにプリロードを停止できますか？

答えて

関連する問題