jQuery Ленивая загрузка после нескольких JSON вызовов - PullRequest
Новая
       26

jQuery Ленивая загрузка после нескольких JSON вызовов

0 голосов
/ 07 апреля 2020

У меня есть JSON звонок, и внутри него у меня есть 4 других JSON звонка . Каждый из этих 4 вызовов добавляет изображения, а затем вызывает jQuery Ленивый, вот так: 

//Load Similar Cards
jQuery.getJSON('https://db.ygoprodeck.com/myapi.php?name=' + encodeURIComponent(data.name) + '&desc=' + encodeURIComponent(data.desc.replace('+', '' )),
function (values) {
    jQuery("#simcards").append('<h6 style="margin-left:5px;">Search Similar Cards</h6><div class="similar-cards"><span class="alt-set-cards"></span></div>');
    jQuery.each(values, function (i, values) {
        var valuename = values.name;
        valuename = valuename.replace(/'/g, "");
        jQuery(".alt-set-cards").append('<a href="https://db.ygoprodeck.com/card/?search='+encodeURIComponent(values.name)+'" title="'+escapeHtml(values.name)+'" onClick="gtag(\'event\', \''+escapeHtml(values.name)+'\', { \'event_category\' : \'DB Similar Cards\', \'event_label\' : \''+valuename+'\' });"><img data-src="https://ygoprodeck.com/'+imglocationsmall+'/'+values.id+'.jpg" alt="'+escapeHtml(values.name)+'" class="lazy"></a>')
    });   
    //jQuery Lazy
    jQuery('.lazy').Lazy({
        // your configuration goes here
        defaultImage: "https://ygoprodeck.com/pics/back_high.jpg",
        scrollDirection: 'vertical',
         effect: "fadeIn",
         effectTime: 500,
         threshold: 0,
        visibleOnly: true,
        onError: function(element) {
            console.log('error loading ' + element.data('src'));
        }
    });                

}).fail(function() {
    console.log("Failed to retrieve Similar Card Data");
});

Если я попробую это так: 

//Load Similar Cards
jQuery.getJSON('https://db.ygoprodeck.com/myapi.php?name=' + encodeURIComponent(data.name) + '&desc=' + encodeURIComponent(data.desc.replace('+', '' )),
function (values) {
    jQuery("#simcards").append('<h6 style="margin-left:5px;">Search Similar Cards</h6><div class="similar-cards"><span class="alt-set-cards"></span></div>');
    jQuery.each(values, function (i, values) {
        var valuename = values.name;
        valuename = valuename.replace(/'/g, "");
        jQuery(".alt-set-cards").append('<a href="https://db.ygoprodeck.com/card/?search='+encodeURIComponent(values.name)+'" title="'+escapeHtml(values.name)+'" onClick="gtag(\'event\', \''+escapeHtml(values.name)+'\', { \'event_category\' : \'DB Similar Cards\', \'event_label\' : \''+valuename+'\' });"><img data-src="https://ygoprodeck.com/'+imglocationsmall+'/'+values.id+'.jpg" alt="'+escapeHtml(values.name)+'" class="lazy"></a>')
    });                 
}).fail(function() {
    console.log("Failed to retrieve Similar Card Data");
}); 

//jQuery Lazy
jQuery('.lazy').Lazy({
    // your configuration goes here
    defaultImage: "https://ygoprodeck.com/pics/back_high.jpg",
    scrollDirection: 'vertical',
     effect: "fadeIn",
     effectTime: 500,
     threshold: 0,
    visibleOnly: true,
    onError: function(element) {
        console.log('error loading ' + element.data('src'));
    }
});

Сбой. Я почти уверен, что это происходит сбой, потому что он вызывается до того, как все изображения закончили добавляться. У меня нет проблем с использованием моей первой реализации выше, но я беспокоюсь об этом на уровне производительности и способности просмотра кода. Если я использую первую реализацию, я буду звонить Lazy 4 раза.

Есть ли способ, которым я могу позвонить своим 4 конечным точкам и затем вызвать jQuery Lazy, чтобы лениво загрузить все изображения или выполняет 1-й пример 4 раза в последовательности, вполне приемлемо для уровня производительности?

...