web-dev-qa-db-ja.com

jqueryを使用した遅延ロードiframe（遅延src http呼び出し）

jQuery image lazy load plugin に似たものを探していますが、iframesを探しています。

javascriptjqueryhttpiframelazy-loading
15
Steve

これは私のために働いた。

var iframes = $('iframe');

$('button').click(function() {
    iframes.attr('src', function() {
        return $(this).data('src');
    });
});

iframes.attr('data-src', function() {
    var src = $(this).attr('src');
    $(this).removeAttr('src');
    return src;
});

jsFiddle 。

23
alex

同様の質問 最近、Twitter Bootstrapベースのタブを備えたiFrameに固有に投稿されました。これは、私が呼び出している手法を使用して 回答済みiFrameの遅延読み込み =。 js/jqueryは次のとおりです。フィドルまたはOPへの応答でhtmlマークアップを含む完全なコードを参照してください。

<script>
$('#myTabs').bind('show', function(e) {  

// identify the tab-pane
paneID = $(e.target).attr('href');

// get the value of the custom data attribute to use as the iframe source
src = $(paneID).attr('data-src');

//if the iframe on the selected tab-pane hasn't been loaded yet...
if($(paneID+" iframe").attr("src")=="")
{
    // update the iframe src attribute using the custom data-attribute value
    $(paneID+" iframe").attr("src",src);
}
});
</script>
4
technoTarek

Srcをabout：blankに設定できますか？このような？

http://jsfiddle.net/MaUfH/

0
wightnoise

WordPressでこれを行いたい場合

これが自動のリクエスト削減ソリューションです

In WordPressプラグインフォーム

これがWordPressプラグインで、WordPressプラグインリポジトリからダウンロードして手動でインストールできます。この状況を処理するためだけに、今日作成しました。コンテンツに変更はありません。必要に応じて、これはすべてのiframeでアクティブ化されると自動的に機能します。

https://wordpress.org/plugins/lowermedia-iframes-on-demand/

0
hawkeye126

いつでもsrc属性をabout：blankに初期化して、クリックイベントが発生したら、src属性を移動先のURLに設定できます。

0
nickytonline