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是失效的, 建议择其一而使用.

38 Comments

Name *

E-mail *

Website

  1. 郑永

    技术活。。。

  2. Android

    技术帖评论往往比较少。。。

  3. 麦田一根葱

    我说怎么不能用了,原来如此。感谢小蝴蝶

  4. zero

    jq的那个lazyload其实有很多的,一般来说我们讨论的是最出名的那个(不一定是最好的),其实还有很多更简单的

    • 小蝴蝶

      @zero 恩那,最出名的那个其实问题很多,用原生js写也可以

  5. 克济

    话说我的博客也加了这个,不过为什么一直没有效果,奇怪。

  6. LimitSY

    话说 如果。在ajax新加载的内容中重新加载lazyload的js的话 可以搞定么?

    • 小蝴蝶

      @LimitSY 两者有冲突 问题不仅是失效啊

      • LimitSY

        @小蝴蝶 这样么。。可以自己写一个lazyload 哈哈

        • 小蝴蝶

          @LimitSY 那样也可以 ,不过写这个文章是为了探讨这个插件的问题…