Загрузить изображение в добавляемый элемент - PullRequest
Новая
       13

Загрузить изображение в добавляемый элемент

0 голосов
/ 01 декабря 2010

У меня проблема при попытке загрузить изображение после добавления элемента, например, при нажатии на миниатюру он заменит /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)
});

Однако, похоже, он не работает, так как показывает только загрузочное изображение, есть ли что-то не так с кодом, поскольку он не загружает изображение в добавляемый элемент ...

EDIT: 

$('.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)
});

Ответы [ 2 ]

2 голосов
/ 02 декабря 2010

Я думаю вот что вы ищете: 

$('.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)
});

Обычно вы передаете обратный вызов многочисленным функциям, которые не принимают функцию. Вышеуказанное загружает изображение в фоновом режиме, и когда оно закончено, оно затухает в загрузочном изображении, а затем заменяет его загруженным.

0 голосов
/ 01 декабря 2010

присвойте класс изображению или идентификатору и попробуйте, как показано ниже: 

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

});

По мере добавления во время выполнения, вам нужно использовать jquery live ???? 

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