欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

jQuery插件实现图片预加载

拉到相应位置才显示图片。先查看效果:

http://www.appelsiini.net/projects/lazyload/enabled.html

插件主页:

http://www.appelsiini.net/projects/lazyload

使用比较简单:引入jquery和插件lazyload.js

<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.lazyload.js" type="text/javascript"></script>

你html上的图片这样处理:

<img class="lazy" src="img/grey.gif" data-original="img/example.jpg"  width="640" heigh="480">

src是一个以像素的灰色图片。data-original里面才是真正的图片地址,自己后台控制批量生成 img

使用:

$("img.lazy").lazyload();//注意这里的.lazy,是图片含有这个class的时候才执行,如果你要全站图片都使用则用$("img")

只要在javascript里面执行即可。

以上代码就实现了你滚动条拉到哪里图片就显示到哪里。

下面是一些扩展效果:

将临界值定为 200, 当可视区域离图片还有 200 个象素的时候开始加载图片.

$("img.lazy").lazyload({ threshold : 200 });

显示方式改为渐变:
1
$("img.lazy").lazyload({ 
    effect : "fadeIn"
});

如果图片在一个div中,你拖动这个div的滚动条的时候执行:

$("img.lazy").lazyload({         
     container: $("#container")
});

延迟加载:
绑定事件后延迟加载。

$(function() {          
    $("img:below-the-fold").lazyload({
        event : "sporty"
    });
});
$(window).bind("load", function() { 
    var timeout = setTimeout(function() {$("img.lazy").trigger("sporty")}, 5000);
}); 

这里可以把拖动滚动条改为点击事件,比如我现在用的:

<script type="text/javascript">
jQuery(function(){
jQuery("img.jzyc").lazyload({
	event : "sporty"
});	
jQuery(".wkuan ul li").eq(1).click(function(){
	jQuery("img.jzyc").trigger("sporty");
	});
}) 		  
</script>

下载这个插件: https://raw.github.com/tuupola/jquery_lazyload/master/jquery.lazyload.js

更多

本文固定链接: http://shanmao.me/web/jquery/jquery-cha-jian-shi-xian-tu-pian-yu-jia-zai | 山猫的博客

该日志由 admin 于2012年08月24日发表在 jQuery 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: jQuery插件实现图片预加载 | 山猫的博客