Как я могу остановить предварительную загрузку? - PullRequest
Новая
       18

Как я могу остановить предварительную загрузку?

3 голосов
/ 21 декабря 2011

Я использую функцию ниже для предварительной загрузки изображений на моей странице 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>

Ответы [ 2 ]

4 голосов
/ 21 декабря 2011

Все, что вы можете сделать, это освободить имеющиеся у вас ссылки на изображения.Это будет зависеть от внутренней реализации браузера, независимо от того, отбрасывает ли он запросы на изображение в полете или нет.Очистка обработчиков событий по крайней мере остановит вас от обработки изображений при их загрузке.Вы можете очистить все ссылки, добавив метод 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 = [];
}
1 голос
/ 21 декабря 2011

Если вы поместите загрузчик в класс, вы можете создать загруженный при нажатии на ссылку.Любой предыдущий загрузчик может получить свойство, которое говорит ему прекратить загрузку.

Примерно так: 

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

Кстати, мне кажется, вы используете другую методику, чем обычно, для предварительной загрузкиизображения.Взгляните на эту страницу .

...