使用JQuery预加载图像

时间:2011-01-15 00:02:26

标签: jquery

我已经搜索了很长时间,并且无法找到可以预加载我从jquery ajax调用中提取的图像的内容。

.ajax调用会产生类似“~1_~2_ etc”的响应。

$(".showPixFeature.hidden").live('click', function () { 
        var adID = this.id.split('_');
        $("#" + adID[0] + '_' + adID[1]).hide();
        $.ajax({
        type: "POST",
        url: "../classifieds/classAdPics.php",
        data: "ID="+ this.id,
        success: function(r){
            var images = r.split('~');
            var thumbs = '';
                var i=0;
                if(((images.length) - 1) > 1){
                for (i=1;i<=(images.length) - 1;i++)
                {
                thumbs = thumbs + '<img src="../images/listings/' + adID[1] + '_' + images[i] + '_sm.jpg" id="' + adID[1] + '_' + images[i] + '" class="thumbNails">';
                }
                }
                thumbs = thumbs + '<div><img src="../images/listings/' + adID[1] + '_1_.jpg" id="' + adID[1] + '_Preview" class="thumbNails"></div>';
            $("#" + adID[0] + '_' + adID[1]).html(thumbs).slideDown();
            }
        });
   $(this).attr("src", "../images/close_pix.png");
   $(this).removeClass('hidden').addClass('shown');
    });
   $(".showPixFeature.shown").live('click', function () { 
         var adID = this.id.split('_');
        $("#" + adID[0] + '_' + adID[1]).slideUp();
        $(this).attr("src", "../images/class_see_more.png");
        $(this).removeClass('shown').addClass('hidden');
   });
   $(".thumbNails").live('click', function() {
       var adID = this.id.split('_');
       $('#' + adID[0] + '_Preview').hide().attr('src', '../images/listings/' + this.id + '_.jpg').fadeIn('500');
   });

我想预先加载.slideup()调用之前调用的图像。

提前致谢。

1 个答案:

答案 0 :(得分:0)

要等待图像到load,您可以使用.load将处理程序绑定到图像。像这样:

$('#myImage')。load(function(){   //当图像加载完毕时会触发 });