Загрузка изображений / ссылок с помощью jQuery & AJAX

Question

У меня были проблемы с отображением изображений на странице после их полной загрузки через ajax. Я провел некоторое исследование и решил проблему следующим образом:

var img = $('<img id="img-photo-1" />').attr('src', data+'.png').load(function(){
                $("#jacket").html(img);
            });

Это здорово, но я также хочу обернуть изображение ссылкой, также возвращенной из AJAX, поэтому я попробовал это:

 img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
           $("div#photo1").html('<a class="shadowbox" id="link-photo-1" href="'+data+'">'+img1+'</a>');
        });

Но это показывает изображение как объект, а не как изображение. Любые идеи о том, как это исправить, я уверен, что это можно сделать с помощью аналогичного подхода, ура

Answer 1

Поскольку img1 является объектом jQuery, вы не можете использовать его как строку. Попробуйте использовать append, чтобы добавить его в DOM.

img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
    var $html = $('<a class="shadowbox" id="link-photo-1" href="'+data+'" />');
    $html.append(img1);
    $("div#photo1").empty().append($html); // I used empty(), because html() would replace anything inside the div
});

Answer 2

Ваш img1 var является элементом jquery.Поэтому, возможно, вам нужно вернуть img1.html(), чтобы объединить строку тега привязки, которую вы строите:

img1 = $('<img id="img-photo-1 />').attr('src', data).load(function(){ 
           $("div#photo1").html('<a class="shadowbox" id="link-photo-1" href="'+data+'">'+img1.html()+'</a>');
        });