jquery 怎么实现图片加载但不显示,类似微博那种大图,当再可视区域内大图就加载但不显示,只有点击小图了,大图才显示
解决方案 »
- js中如何控制传入的数据闭包
- 动态修改css backgroundImage 问题
- 高手请帮忙呀!!!我用Javascript验证注册页面,可就是怎么已不能验证通过!!!小弟刚学!!!
- 急,真急,真的急了(关于javascript速度问题)
- div初始化的便捷方法?
- 求解千年难题,Select控件下拉长度以及下拉弹出方向问题!
- 如何设置p对象之间的行距?
- 正则表达式($1=4)是怎么来的
- style="left: parseInt(220+(<bean:write name='index'/>)*50) px; top: 133px; width: 283px; height: 10px" >
- 求助:为什么这段代码中的删除出错呢?
- 急!!!求解!!!
- 循环对象时,有关switch的一些疑惑
$("<div id='theforever_knight_1' style='display:none;position=....根据情况自己设置'><img src='"+图片文件URL+"'></div>").appendTo(合适对象);想显示的时候:
$("#theforever_knight_1").show();
<script type="text/javascript">
(function ($) {
$.fn.lazyload = function (options) {
if (this.size() == 0) return false;
var settings = { effect: "fadeIn", placeholder: '/images/grey.gif' };
if (options) $.extend(settings, options);
var elements = this;
$(window).bind("scroll", function (event) {
elements.each(function () {
if ($.inScreen(this)) $(this).trigger("appear");
});
var temp = $.grep(elements, function (element) { return !element.loaded; });
elements = $(temp);
});
this.each(function () {
var self = this;
$(self).one("appear", function () {
if (!this.loaded) {
$("<img />").bind("load", function () {
//$(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed);
//将显示图片改为绑定click,在click事件中显示
$(self).click(function () { $(self).hide().attr("src", $(self).attr("original"))[settings.effect](settings.effectspeed); });
self.loaded = true;
}).attr("src", $(self).attr("original"));
}
});
//不需要打断,默认显示的是小图片
//if (!$(self).attr("original")) $(self).attr('original', $(self).attr('src')).attr('src', settings.placeholder); //判断选择其中的图片是否设置了original属性,如果没有则打断图片加载,设置为替换图片
});
$(window).trigger('scroll'); return this;
};
$.inScreen = function (e) { if (!e) return false; var et = $(e).offset().top + $(e).height(), st = $(window).scrollTop(), sh = $(window).height(); return et >= st && et <= st + sh; } //判断图片是否在显示的区域内
})(jQuery);
$(function () {
$('img[original]').lazyload() ;
});
</script>
图片1<br />
<img src="http://ftp.code-design.cn/imgdesign/20100527/2010527154105487_s.jpg" original="http://ftp.code-design.cn/imgdesign/20100527/2010527154105487.jpg"/><br /><br /><br />图片2<br />
<img src="http://ftp.code-design.cn/imgdesign/20100527/2010527154349225_s.jpg" original="http://ftp.code-design.cn/imgdesign/20100527/2010527154349225.jpg" />