39

Webkit には既知のバグがあり、DOM から画像を削除すると、それに関連付けられているメモリが解放されません。

これは、画像を頻繁に読み込む単一ページ アプリの問題です。

さまざまな推奨される解決策は次のとおりです。

最初の 3 つの方法はうまくいきません。画像要素をリサイクルすることの主な欠点は、それを管理するために大量のコードを記述することを意味することです。画像を含む可能性のある AJAX 経由で新しい HTML をロードしているため、ロードされる画像の数は必ずしもわかりません。

この問題を解決する他の回避策はありますか?

4

5 に答える 5

1

基本的なイメージ プールでは、再利用のために img 要素をリサイクルできる必要があります。事前にイメージの合計数がわからないため、必要に応じてプール サイズを拡張してください。

このようなものが動作するはずです:

    function getImg( id, src, alt ) {
        var pool = document.getElementById( 'image_pool' );
        var img = ( pool.children.length > 0 ) ? pool.removeChild( pool.children[0] ) : document.createElement( 'img' );
        img.id = id;
        img.src = src;
        img.alt = alt;
        return img;
    }
    function recycleImg( id ) {
        var img = document.getElementById( id );
        document.getElementById( 'image_pool' ).appendChild( img.parentNode.removeChild( img ) );
    }

非表示の「image_pool」コンテナーをページのどこかに配置して、使用間で再利用された画像を非表示にします。

<div id="image_pool" style="display:none;"></div>

次に、新しい img 要素が必要なときはいつでも、次のように呼び出します。

document.getElementById( 'some_element_id' ).appendChild( getImg( 'my_image_id', 'images/hello.gif', 'alt_text' ) );

そして、あなたがそれを終えたら：

recycleImg( 'my_image_id' );

jQuery の代替

    function getImg( id, src, alt ) {
        var img;
        if( $("#image_pool").children().length > 0 ) {
            return $("#image_pool img:first-child").attr( { 'id': id, 'src': src, 'alt': alt } ).detach();
        }
        return $( "<img />'" ).attr( { 'id': id, 'src': src, 'alt': alt } );
    }
    function recycleImg( id ) {
        $( "#" + id ).detach().appendTo( $("#image_pool") );
    }

新しい img 要素が必要な場合:

getImg( 'my_image_id', 'images/hello.gif', 'alt_text' ).appendTo( $( "#some_element_id" ) );

（リサイクルは上記と同じ）

于 2013-12-30T22:30:23.847 に答える
0

Javascript DOM ツリー オブジェクトを「null」に設定してみてください。

まず、chrome 開発者ツール インターフェイスなどを使用して、DOM ツリー階層でオブジェクトを見つけて調べ、画像のバイナリを含むオブジェクトを見つけます。

のように、そのオブジェクトを null に設定してみてくださいvar obj = null;。

これにより、子が参照されなくなったことを Javascript に伝え、オブジェクトのメモリを強制的に解放する必要があります。

于 2012-12-14T03:39:50.790 に答える
-1

画像を背景としてdivに設定するのはどうですか？Flickrはモバイルhtml5アプリでこのようなことをしていると思います。

于 2012-12-31T05:48:01.633 に答える