■遅延ロードスクリプト

/**image lazyload**/
document.addEventListener('DOMContentLoaded', function() {

//lazyimages
var lazyImages = [].slice.call(document.querySelectorAll(".lazyload"));
if ("IntersectionObserver" in window){
var lazyImageObserver = new IntersectionObserver(function(entries, observer){
entries.forEach(function(entry){
if (entry.isIntersecting){
var lazyImage = entry.target;

//for img src
if (lazyImage.dataset.hasOwnProperty('src')){
lazyImage.src = lazyImage.dataset.src;
lazyImage.dataset.src = '';
delete lazyImage.dataset.src;
lazyImage.classList.add("active");//for class="fadein"
}

//for picture source srcset
for (var source in lazyImage.parentNode.children) {
var pictureSource = lazyImage.parentNode.children[source];
if (typeof pictureSource.tagName === "string" && pictureSource.tagName === "SOURCE") {
pictureSource.srcset = pictureSource.dataset.srcset;
pictureSource.dataset.srcset = '';
delete pictureSource.dataset.srcset;
}}

//for img srcset
if (lazyImage.dataset.hasOwnProperty('srcset')){
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.dataset.srcset = '';
delete lazyImage.dataset.srcset;
}

//for img sizes
if (lazyImage.dataset.hasOwnProperty('sizes')){
lazyImage.sizes = lazyImage.dataset.sizes;
lazyImage.dataset.sizes = '';
delete lazyImage.dataset.sizes;
}

//for video source src
for (var source1 in lazyImage.children) {
var videoSource = lazyImage.children[source1];
if (typeof videoSource.tagName === "string" && videoSource.tagName === "SOURCE") {
videoSource.src = videoSource.dataset.src;
videoSource.dataset.src = '';
delete videoSource.dataset.src;
lazyImage.load();
lazyImage.classList.add("active");//for class="fadein"
lazyImage.setAttribute("controls","");
}}

//for video poster
if (lazyImage.dataset.hasOwnProperty('poster')) {
lazyImage.poster = lazyImage.dataset.poster;
lazyImage.dataset.poster = '';
delete lazyImage.dataset.poster;
}

//for script (div data-script)
if (lazyImage.dataset.hasOwnProperty('script')){
lazyImage.script = lazyImage.dataset.script;
var itemScript = document.createElement('script');
itemScript.src = lazyImage.script;
document.getElementsByTagName('head')[0].appendChild(itemScript);
lazyImage.classList.add("active");//for class="fadein"
}

//for css (div data-link)
if (lazyImage.dataset.hasOwnProperty('link')){
lazyImage.link = lazyImage.dataset.link;
var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = lazyImage.link;
document.getElementsByTagName('head')[0].appendChild(link);
}

lazyImage.classList.remove("lazyload");
lazyImageObserver.unobserve(lazyImage);
}});}

,{
root:null,
rootMargin:'100px 0px 100px 0px',
threshold:0
});

lazyImages.forEach(function(lazyImage){
lazyImageObserver.observe(lazyImage);
});}

});

●scriptの遅延ロード記述

//for script (div data-script)
if (lazyImage.dataset.hasOwnProperty('script')){
lazyImage.script = lazyImage.dataset.script;
var itemScript = document.createElement('script');
itemScript.src = lazyImage.script;
document.getElementsByTagName('head')[0].appendChild(itemScript);
lazyImage.classList.add("active");//for class="fadein"
}

画面をスクロールして上下ともに100px圏内に近づくと「data-」が取れて、head内にスクリプトが追加されて起動する仕組み。

div要素のclassにactiveを追加してるのは、表示時にフェードイン効果などのcssでアクションを起こせるようにするため。

設置例

<div class="main-inner lazyload fadein" data-script="https://example.com/js/instagram-feed.js">
-省略-
</div>