負荷のiframeがダウン

Question

私はインラインフレームを使用してページを持っている... は、現在、私はここで

は私のコード..ですクリックでのiframeをロードするには、このコードを使用し

$('.a').click(function(){ 
    var iframe = $("#b"); 
    iframe.attr("src", iframe.data("src")); 
}); 

HTML：

<button class='a'>Load</button> 
<iframe id='b' src='' data-src='index.php'></iframe> 

が、私はまた、私はスクロールダウン（上から500pxなど）にはiframeをロードする

することができます誰かのp

おかげ

Answer 1

はこのお試しください...私はこれを行うことができますどのように私をリース助ける：あなたは1時間以上500 でスクロールした後にのみロードしたい場合は、フラグを追加することができます

$(window).scroll(function() { 
    var height = $(window).scrollTop(); 
    if(height > 500) { 
     var iframe = $("#b"); 
     iframe.attr("src", iframe.data("src")); 
    } 
}); 

をし、ページのロードにはfalseに、それは等しいが、イベントをスクロールの内側にそれが本当作り、あなたはIFRAME 例ロードする前にこのフラグをチェック：

var isLoaded = flase; 
$(window).scroll(function() { 
    var height = $(window).scrollTop(); 
    if(height > 500) { 
     if(!isLoaded){ 
      var iframe = $("#b"); 
      iframe.attr("src", iframe.data("src")); 
      isLoaded = true; 
     } 
    } 
}); 

を

Answer 2

考えられるのは、ユーザーがページをスクロールするたびにウィンドウオブジェクトに送出されるスクロールイベントにコールバックを追加することです。このコールバックは、iframeがまだ読み込まれていない場合、およびスクロール値が500pxより大きい場合にiframeを読み込むために使用されます。

(function() { 
    var iframeLoaded = false; 
    function loadIframeOnScroll() { 
    if (window.scrollY >= 500 && !iframeLoaded) { 
     loadIframe(); 
    } 
    }; 

    function loadIframe() { 
    if (!iframeLoaded) { 
     var $iframe = $('#b'); 
     $iframe.attr('src', $iframe.data('src')); 
     window.removeEventListener('scroll', loadIframeOnScroll); 
     iframeLoaded = true; // could be placed in the onload callback of the iframe 
    } 
    } 

    window.addEventListener('scroll', loadIframeOnScroll); 
    document.querySelector('.a').addEventListener('click', loadIframe); 
})();