jquery怎么实现图片加载但不显示

Question

jquery 怎么实现图片加载但不显示，类似微博那种大图，当再可视区域内大图就加载但不显示，只有点击小图了，大图才显示

Answer 1

预加载：
$("<div id='theforever_knight_1' style='display:none;position=....根据情况自己设置'><img src='"+图片文件URL+"'></div>").appendTo(合适对象);想显示的时候：
$("#theforever_knight_1").show();

Answer 2

我不是需要预加载图片，是相反的，要延迟加载图片，在可视区域内的图片加载，可视区域外的不加载，我现在知道用jquery的lazyload来延迟加载图片，但是它加载了图片就显示出来了，我是希望大小图都加载，但是只显示小图，不显示大图，当点击小图时才显示大图

Answer 3

修改下源代码就好了。。将显示图片改为绑定图片click事件，在click事件中显示大图<script type="text/javascript" src="http://ftp.code-design.cn/js/jquery.js"></script>
<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" />

Answer 4

new Image().src="大图片"; // 加载图片，不显示<img src="小图片" onclick="this.scr='大图片';"/>