Append img using src с другой страницы

Question

У меня есть набор thumnails, генерируемых cms. Они связаны со всплывающим окном, содержащим полное изображение. Я хочу использовать 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

я понял, что я делал все это неправильно, потому что $ получить() будет загружать все изображения рано. Вместо этого я переработал его, чтобы использовать чистые теги 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' 
    }); 
     });