從另一頁使用src追加img

Question

我有一組由cms生成的thumnails。這些鏈接到包含完整圖像的彈出窗口。我想要做的就是使用jquery獲取完整的圖像來填充延遲加載滑塊。

所以基本上我只是通過每個縮略圖，得到它的鏈接目的地，然後在那裏找到完整的形象。

目前，我能夠得到它的唯一方法是繼續檢查它，直到它完成。

我剛剛意識到這並不按預期工作，因爲它的加載圖像來獲取src，這使得懶惰加載毫無意義......有沒有解決方案呢？

$('.thumbnails img').each(function() { 
    var large = $(this).parent().attr('href'); 
    $.get(large, function(data) { 
    var imgs = $('<div/>').html(data).find('img'); 
    var src = ""; 
    imgs.each(function(i, img) { 
     src = (img.src); 
    }); 
    $('.slider').append('<div><img data-lazy="' + src + '"/></div>'); 
    }); 
}); 

var checkExist = setInterval(function() { 
if($('.slider').find('img').length == $('.thumbnails').find('img').length){ 
    $('.slider').slick({ 
    lazyLoad: 'ondemand', 
    }); 
    clearInterval(checkExist); 
}; 
}, 100); 

Answer 1

我意識到我做這一切錯了，因爲$ get（）方法會很早加載的所有圖像。相反，我重新使用空白img標籤，直到需要幻燈片。這種方式滑塊有內容要初始化，我手動懶加載。

//Make a list of all the urls and fill slider with blank images 
var large = []; 
$('.thumbnails img').each(function() { 
    $('.slider').append('<img src=""/>'); 
    large.push($(this).parent().attr('href')); 
    $(this).parent().attr("href", "javascript:;"); 
    $(this).parent().removeAttr("onclick").removeAttr("target"); 
}); 

//Set the first image src 
$.get(large[0], function(data) { 
    var imgs = $('<div/>').html(data).find('img'); 
    imgs.each(function(i, img) { 
    var src = (img.src); 
    $('.slider img').first().attr('src', src); 
    }); 
}); 

//Initialize Slider 
$('.slider').slick(); 

//When the slider changes set the src for the next slide image 
$('.slider').on('beforeChange', function(event, slick, currentSlide, nextSlide){ 
    $.get(large[nextSlide], function(data) { 
    var imgs = $('<div/>').html(data).find('img'); 
    imgs.each(function(i, img) { 
     var src = (img.src); 
     $('.slick-slide').eq(nextSlide).find('img').attr('src', src); 
    }); 
    }); 
}); 

Answer 2

var length = $('.thumbnails img').length; 
    $('.thumbnails img').each(function(index, item) { 
     var large = $(this).parent().attr('href'); 
     $.get(large, function(data) { 
     var imgs = $('<div/>').html(data).find('img'); 
     var src = ""; 
     imgs.each(function(i, img) { 
      src = (img.src); 
     if (index == length - 1) { //last item 
      $('.slider').append('<div><img data-lazy="' + src + '"/></div>'); 
     } 
     }); 
     $('.slider').slick({ 
    lazyLoad: 'ondemand' 
    }); 
     });