从另一页

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

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

Answer 2

我意识到我做错了，因为$ 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);
    });   
  });
});