如何停止预加载？

发布于 2024-12-22 01:51:04 字数 4144 浏览 1 评论 0原文

我正在使用下面的函数在我的 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>

原文

I'm using a function below to preload images on my ajax page. My page contains image galleries. But I need to stop preloading of current gallery when I click another gallery link. Any help? Thanks...

It's solved... Here's working code with an example...

<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>

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

风启觞 2024-12-29 01:51:04

您所能做的就是释放已有的图像参考。是否丢弃正在进行的图像请求将取决于浏览器的内部实现。清除事件处理程序至少会阻止您在加载图像时对其进行处理。您可以通过向对象添加 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 = [];
}

All you can do is free the image references you have in place. It will be up to the browser's internal implementation whether it drops the in-flight image requests or not. Clearing the event handlers will at least stop you from processing the images as they load. You can clear all the references by adding a cancel() method to your object like this:

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 = [];
}

回复收藏 0 原文

月亮邮递员 2024-12-29 01:51:04

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

像这样的事情：

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

顺便说一句，在我看来，您正在使用与平常不同的技术来预加载图像。查看此页面。

If you put the loader in a class, you can create a loaded when a link is clicked. Any previous loader can get a property that tells it to stop loading.

Something like this:

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, it seems to me you're using a different technique than usual to preload the images. Take a look at this page.

回复收藏 0 原文

~没有更多了~