6

HTML情報を含む文字列を取得する次のスクリプトがあります（画像への参照も含まれています）。

DOM 要素を作成すると、画像のコンテンツがブラウザによってダウンロードされます。この Beauvoir を停止して、一時的に読み込みを防止することができるかどうかを知りたいです。

私は web-kit と presto ブラウザーをターゲットにしています。

  relativeToAbosluteImgUrls: function(html, absoluteUrl) {
        var tempDom = document.createElement('div');
        debugger
        tempDom.innerHTML = html;
        var imgs = tempDom.getElementsByTagName('img'), i = imgs.length;
        while (i--) {
            var srcRel = imgs[i].getAttribute('src');
            imgs[i].setAttribute('src', absoluteUrl + srcRel);
        }
        return tempDom.innerHTML;
    },
4

4 に答える 4

9

srcなどの HTML5 data-* 属性にパスを格納しますdata-src。設定しないsrcと、ブラウザは画像をダウンロードしません。画像をダウンロードする準備ができたら、属性から URL を取得し、それを属性data-srcとして設定するだけですsrc

$(function() {
    // Only modify the images that have 'data-src' attribute
    $('img[data-src]').each(function(){
        var src = $(this).data('src');
        // modify src however you need to, maybe make
        // a function called 'getAbsoluteUrl'
        $(this).prop('src', src);
    });
});
于 2013-10-03T13:31:44.810 に答える
2

ロジックを逆にする必要があると思います。デフォルトでは画像をロードせず、画像が必要な時点で src 属性を更新して、ブラウザにロードを開始するように指示します。

または、次のような jquery 遅延画像読み込みプラグインを使用することをお勧めします。

http://www.appelsiini.net/projects/lazyload

お役に立てれば。

于 2013-10-03T13:30:53.883 に答える
0

画像が表示されないようにするには、これを使用できます。

    $(window).loaded( function() { 
$("img").removeAttr("src");
 });

トリッキーで予期しない結果になるかもしれませんが、それは可能です。

于 2013-10-03T13:35:49.457 に答える