jquery.lazyload问题
<script language="javascript" type="text/javascript" src="js/jquery1.7.2.min.js"></script>
<script language="javascript" type="text/javascript" src="js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {$("img").lazyload({effect : "fadeIn"});});
</script>
我在页面的头部加了延时加载的代码,为什么页面中的图片都一次性加载完了,页面很长 大部分由图片组成
------解决方案--------------------不知你<img 怎么写的
<img class="lazy" src="这个改成空白或临时的" data-original="真正要显示的URL" width="765" height="574">
------解决方案--------------------<script type="text/javascript" src="<?php bloginfo('template_directory');?>/js/jquery.lazyload.js"></script>
<script type="text/javascript">
$(function() {
$("img").lazyload({
effect : "fadeIn"
});
});
</script>
其中img是延迟加载所有图片,也可以根据不同模板作相应改动,比如我这个主题,可以改成#post img,这样只延迟加载#post 容器内的图片,否则可能影响到侧边图片的加载,主要是留言者头像可能会最后加载;
fadeIn是图片显示效果
这样基本就可以了!
如果上面的功能可能没有达到你的要求,还有几个选项可供设置。
可以设置阀值来控制 灵敏度
$(“img”).lazyload({ threshold : 200 });
把阀值设置成200 意思就是当图片没有看到之前先load 200像素。当然了你也可以通过设置占位符图片和自定事件来触发加载图片事件
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});
还可以通过定义effect 参数来定义一些图片显示效果
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn"
});
事件触发加载,事件可以是任何 jQuery 时间, 如: click 和 mouseover. 你还可以使用自定义的事件, 如: sporty 和 foobar. 默认情况下处于等待状态, 直到用户滚动到窗口上图片所在位置. 在灰色占位图片被点击之前阻止加载图片, 你可以这样做:
$("img").lazyload({
placeholder : "img/grey.gif",
event : "click"
});