如何停止预加载？
Posted
技术标签:
【中文标题】如何停止预加载？【英文标题】：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>
【问题讨论】：
【参考方案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。
【讨论】：
以上是关于如何停止预加载？的主要内容，如果未能解决你的问题，请参考以下文章