Ленивая загрузка Сова Карусель - PullRequest
Новая
       42

Ленивая загрузка Сова Карусель

0 голосов
/ 03 июля 2019

Как я могу использовать ленивую загрузку изображений для этого скрипта?

Я только начал изучать JavaScript, поэтому до сих пор не понимаю об этом.

Надеюсь, вы поможете мне решить эту проблему. 

$('.ty-slide-show .HTML .widget-content div.tagpost').each(function() {
    var v = $(this).attr("data-label"),
        b = $(this).attr("data-no");
    $.ajax({
        url: "/feeds/posts/default/-/" + v + "?alt=json-in-script&max-results=" + b,
        type: 'get',
        dataType: "jsonp",
        success: function(e) {
            var u = "";
            var h = '<div class="ty-slide flexslider"><ul class="slides owl-carousel">';
            for (var i = 0; i < e.feed.entry.length; i++) {
                for (var j = 0; j < e.feed.entry[i].link.length; j++) {
                    if (e.feed.entry[i].link[j].rel == "alternate") {
                        u = e.feed.entry[i].link[j].href;
                        break
                    }
                }
                var g = e.feed.entry[i].title.$t;
                var s = e.feed.entry[i].category[0].term;
                var y = e.feed.entry[i].author[0].name.$t;
                var d = e.feed.entry[i].published.$t,
                    t = d.substring(0, 4),
                    w = d.substring(5, 7),
                    f = d.substring(8, 10),
                    r = month_format[parseInt(w, 10)] + ' ' + f + ', ' + t;
                var c = e.feed.entry[i].content.$t;
                var $c = $('<div>').html(c);
                if (c.indexOf("https://www.youtube.com/embed/") > -1) {
                    var p = e.feed.entry[i].media$thumbnail.url.replace('/default.jpg', '/mqdefault.jpg');
                    var k = p
                } else if (c.indexOf("<img") > -1) {
                    var q = $c.find('img:first').attr('src').replace('s72-c', 's1600');
                    var k = q
                } else {
                    var k = no_image
                }
                h += '<ul><li><div class="ty-wow"><a class="ty-thumb-bonos" href="' + u + '"><img alt="' + g + '" src="' + k + '"/><span class="tyimg-lay"/></a><div class="ty-slide-con"><div class="ty-slide-con"><div class="ty-slide-con-tab"><h3 class="ty-bonos-entry"><a href="' + u + '">' + g + '</a></h3><a class="recent-shop" href="' + u + '"><i class="fa fa-shopping-basket"></i>SHOP NOW</a></div></div></div></div></li></ul>'
            }
            h += '</ul></div>';
            $(".ty-slide-show .HTML .widget-content div.tagpost").each(function() {
                var text = $(this).attr("data-label");
                if (text == v) {
                    $(this).parent().html(h)
                }
            })
        }
    })
});

Я пытался добавить lazyLoad: true

до

$(window).on('load', function(){$('.owl-carousel').owlCarousel({lazyLoad:true,items:3,autoplay:!0,autoplayTimeout:5000.....

но, похоже, это ничего не меняет, и я не могу просто изменить

<img alt="'+g+'" src="'+k +'"/>

до

<img alt="'+g+'" data-src="'+k +'"/>

потому что миниатюры не будут отображаться.

...