Question

如何在此javascript中使用延迟加载图像作为缩略图？因为我通常所做的只是将图像中的每个src更改为data-src并在其中放置一个惰性类，但是此时有所不同，这对我来说是新事物。

$('.ready-widget .HTML .widget-content span.randomposts').each(function() {
var b = $(this).attr("data-no");
$.ajax({
    url: "/feeds/posts/default?alt=json-in-script",
    type: 'get',
    dataType: "jsonp",
    success: function(t) {
        t = t.feed.entry.length - 3, t = Math.floor(Math.random() * (t - 0 + 1)) + 0, 0 == t && (t = Math.floor(Math.random() * (t - 0 + 1)) + 1), t == 0 && (t == 1), $.ajax({
            url: "/feeds/posts/default?alt=json-in-script&start-index=" + t + "&max-results=" + b,
            type: 'get',
            dataType: "jsonp",
            success: function(data) {
                var url = "";
                var randomcode = '<ul class="custom-widget">';
                for (var i = 0; i < data.feed.entry.length; i++) {
                    for (var j = 0; j < data.feed.entry[i].link.length; j++) {
                        if (data.feed.entry[i].link[j].rel == "alternate") {
                            url = data.feed.entry[i].link[j].href;
                            break
                        }
                    }
                    var title = data.feed.entry[i].title.$t;
                    var get_date = data.feed.entry[i].published.$t,
                        year = get_date.substring(0, 4),
                        month = get_date.substring(5, 7),
                        day = get_date.substring(8, 10),
                        date = month_format[parseInt(month,10)]+' '+day+', '+year;
                    var content = data.feed.entry[i].content.$t;
                    var $content = $('<div>').html(content);
                    if (content.indexOf("https://www.youtube.com/embed/") > -1 || content.indexOf("https://www.youtube.com/embed/") > -1) {
                        var src2 = data.feed.entry[i].media$thumbnail.url;
                        var image = src2
                    } else if (content.indexOf("<img") > -1) {
                        var src = $content.find('img:first').attr('src');
                        var image = src
                    } else {
                        var image = no_image
                    }
                    randomcode+='<li><div class="ran-pro-thumb"><a class="rcthumb" href="'+url+'" aria-label="Random Posts" style="background:url('+image+') no-repeat center center;background-size: cover"><span class="img-overlay"/></a></div><div class="post-panel"><h3 class="rcp-title"><a href="'+url+'">'+title+'</a></h3><a class="ran-read" href="'+url+'"><i class="fa fa-play"></i>Watch Now</a></div></li>'
                }
                randomcode+='</ul><div class="clear"/>';
                $('.ready-widget .HTML .widget-content span.randomposts').each(function() {
                    if ($(this).attr("class").match("randomposts")) {
                        $(this).html(randomcode);
                        $(this).find('.rcthumb').each(function() {
                            $(this).attr('style', function(i, src) {
                                return src.replace('/default.jpg', '/mqdefault.jpg')
                            }).attr('style', function(i, src) {
                                return src.replace('s72-c', 's1600')
                            })
                        })
                    }
                })
            }
        })
    }})
});

我尝试使用此脚本：

document.addEventListener("DOMContentLoaded", function() {
var lazyBackgrounds = [].slice.call(document.querySelectorAll(".lazy-rcthumb"));
...........
...........
...........

此后，我将rcthumb的所有类都更改为lazy-rcthumb，但是它不起作用。

您能帮我解决这个问题吗？

随机帖子的延迟加载缩略图

0 个答案: