어떻게 미리로드를 중지 할 수 있습니까?

아래 함수를 사용하여 내 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

괜찮습니다. 덕분에 ... –

, 당신은 링크를 클릭하면로드 생성 할 수 있습니다. 이전 로더는로드를 중지하라는 특성을 얻을 수 있습니다. 이 같은

뭔가 :

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); 
}

, BTW 당신이 이미지를 미리로드 평소보다 다른 기술을 사용하고 날 것으로 보인다. this page을보십시오.

출처

2011-12-20 21:02:02 GolezTrol

어떻게 미리로드를 중지 할 수 있습니까?

답변

관련 문제