从另一页使用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' 
    }); 
     });