Question

我这里有一个延迟加载代码块：

(function($){

    var items = [];

    function winPos(win) {
        return { x: 0, y: 0, x2: win.width() - 1, y2: win.height() - 1 };
    }

    function pos(win, el) {
        var p = el.offset();
        var x = p.left - win.scrollLeft();
        var y = p.top - win.scrollTop();
        return { x: x, y: y, x2: x + el.width() -1, y2: y + el.height() - 1 };
    }

    function intersects(a, b) {
        return !(a.x2 < b.x || a.x > b.x2 || a.y2 < b.y || a.y > b.y2);
    }

    function check(win, w, item) {
        var p = pos(win, $(item.el));
        var s = intersects(w, p);
        if (s != item.shown) {
            item.shown = s;
            (s ? item.show : item.hide).call(item.el);
        }
    }

    $.fn.visible = function(show, hide){
        var win = $(window), w = winPos(win);
        return this.each(function(i, el){
            var item = { el: el, show: show, hide: hide, shown: false };
            items.push(item);
            check(win, w, item);
        });
    };

    $(window).on('scroll resize', function(e){
        var win = $(window), w = winPos(win);
        for (var i = 0; i < items.length; i++) {
            check(win, w, items[i]);
        }
    });

})(jQuery);

// Lazy loading images plugin

(function($){

    $.fn.lazyImage = function(){
        return this.visible(function(){
            $(this).append($('<img>', {'src':  $(this).data('src') }).css('opacity', 0).load(function(){
                $(this).animate({ opacity: 1 });
            }));
        }, function(){
            $(this).empty();
        });
    };

})(jQuery);

// Usage

$('div').lazyImage();

https://jsfiddle.net/Guffa/u7bcms27/

我想懒加载每个iframe div。

*

这是我的代码，它从Reddit API获取链接和标题，并将视频加载到Iframe中。

fetch('https://www.reddit.com/r/cleanupearth.json')
.then(res=>res.json())
.then(res=>res.data.children)
.then(res=>res.map(post=>({
  // author: post.data.author,
  link: post.data.url,
  img: post.data.thumbnail,
  title: post.data.title
})))
.then(res=>res.map(render))
.then(res=>console.log(res))

const app = document.querySelector('#app');
const render = post => {
 const node = document.createElement('div');  
   node.innerHTML= `${post.title}`;
  node.className= 'clip-title';
    app.appendChild(node);
 //node.style.fontSize = "50px";

 var regExp = /^.*(youtu\.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/;
var url = post.link;
// var url = "https://www.youtube.com/watch?v=MPmKEi4xXMg";
var match = url.match(regExp);
var strippedURL = match[2];
//alert("strippedURL is " + strippedURL); 
if (match && match[2].length == 11) {
    console.log(match[2]);
} else {
  //error
  console.log('error');
}

var a = document.createElement('iframe');
// iframe.id = 'appiframe';
  a.className = "clip-content"
a.src = "https://www.youtube.com/embed/" + strippedURL; //add your iframe path here
a.width = "100%";
a.height = "100%";
a.padding = "500px";
app.style.textAlign = "center";
document.querySelector('#app').appendChild(a);
}

*

这里是两个片段的小提琴。

https://jsfiddle.net/p5tL6jvr/

原始代码段创建一个名为items的空数组：

var items = [];

并将图像加载到追加函数中;

$(this).append($('<img>', {'src':  $(this).data('src') }).css('opacity', 0).load(function()

我可以将整个id =＃app div加载到items数组中，并将img行换成创建iframe的行。解决这个问题的最佳方式是什么？

顺便说一句，如果有人知道在纯Javascript而不是JQuery中使用简洁的方法，那么阅读会很有趣。

懒惰加载重复的iframe Div

0 个答案: