lazyload若干问题及解决思路

→

由于照片页面照片太多,所以加了lazyload,用上之后发现有不少问题,

js的$冲突

如果出现$冲突的错误, 建议用noConflict()方法将jquery对$的所有权释放.
在手册中对noConflict()的说明如下:

noConflict()方法让渡变量 $ 的 jQuery 控制权。
该方法释放 jQuery 对 $ 变量的控制。
该方法也可用于为 jQuery 变量规定新的自定义名称。
提示：在其他 JavaScript 库为其函数使用 $ 时，该方法很有用。

也就是把jQuery占用的全局变量$和jQuery返回给其它的js库.
在lazyload的使用中, 原本写法是:

$("img.lazy").lazyload({ 
	effect : "fadeIn"
});

现在我们就可以改写成:

var jq=jQuery.noConflict();
jq(function(){
	jq("img.lazy").lazyload({
		effect:"fadeIn"
	});
});

图片无法加载的未知错误

我从主页点进照片页面后, 满屏菊花转, 图片一直不出来, 重新点一次才正常, 这个问题的原因暂不明确, 我估计是由于我主页使用了预加载的原因.
但是总不能让读者都手动重新点一次, 所以我想到用js让页面自动刷新一次, 这样一来问题就解决了, 虽然该方法简单粗暴, 但是暂时我也没想出别的好办法. 毕竟预加载对提速作用还是很大的, 不舍得去掉.
在使用lazyload的界面头部加上如下js代码:

function autorefresh(){ 
	url = location.href;  
	var num = url.split("?");
	if(num[1] != 1){ 
		url += "?1";  
		self.location.replace(url);  
	} 
} 
onload=autorefresh

这样一来, 打开页面后会自动刷新一次, lazyload便正常运作了.

ajax冲突

最后, lazyload与ajax也冲突, 因此在使用了comment-ajax的页面, lazyload是失效的, 建议择其一而使用.