別のページの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

）が早期にすべての画像をロードします。代わりに、スライドが必要になるまで空白の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' 
    }); 
     });