Question

我在添加元素后尝试加载图片时遇到问题，因为点击缩略图时，它会将/t/替换为/i/然后加载到附加元素中代码：

$('.main-image img').live('click', function ()
{
 var image_url = $(this).attr('src');
 var loadurl = image_url.replace(/\/t\//, '/i/');

 $('.container').slideUp('slow');

 $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
 {
  $('<img />').attr('src', loadurl).load(function()
  {
            $('.quick-view').empty();
   $(this).appendTo('.quick-view');
  });
 });

    // ignore this part - above is what needs helping with
 $('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
 $('.container:last').css('background', '#FFF');
 $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

然而，它似乎不起作用，因为它只显示加载图像，代码有什么特别的错误，因为它没有将图像加载到附加元素...

修改

$('.main-image img').live('click', function ()
{
    var image_url = $(this).attr('src');
    var loadurl = image_url.replace(/\/t\//, '/i/');
    var self = $(this);

    $('.container').slideUp('slow');

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>', function()
    {
        $('<img />').attr('src', loadurl).live('load', function()
        {
            self.fadeOut('slow', function()
            {
                self.empty(function()
                {
                    self.appendTo('.quick-view');
                });
            });
        });
    });
    $('.quick-view').css('line-height', ($('.quick-view').parents().find('.container').height() - 25) + 'px');
    $('.container:last').css('background', '#FFF');
    $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

Answer 1

我认为这就是你所追求的：

$('.main-image img').live('click', function () {
    var loadurl = this.src.replace(/\/t\//, '/i/');
    $('.container').slideUp('slow');

    $('#pop-up').append('<div class="container tcenter"><p id="close-preview" class="link tcenter">Close</p><div class="quick-view"><img src="img/loading.gif" /></div></div>');

    $('<img />').load(function() {
       var img = this;
       $('.quick-view img').fadeOut('slow', function() {
         $(this).replaceWith(img);
       });
    }).attr('src', loadurl);

    $('.quick-view').css('line-height', ($('.quick-view').closest('.container').height() - 25) + 'px');
    $('.container:last').css('background', '#FFF');
    $('.container:last img').css('max-height', $(window).height() * 75 / 100)
});

基本上你将回调传递给许多不接受函数的函数。上面将图像加载到背景中，当它完成时淡出加载器图像，然后用加载的图像替换它。

Answer 2

为图片或ID提供课程，并尝试如下

$('#imageId').load(function() {

});

因为它在运行时添加，你需要使用jquery live ????

$('img').live('load', function ()
{
    //try live
});

将图像加载到附加元素中

2 个答案: