7

誰かが答えてくれることを願っている小さな質問です。

さまざまなサイトでコンテンツ操作をテストするために、この個人用の chrome 拡張機能を作成しています。これらのサイトの 1 つで、既存<img>のイメージを別のイメージに置き換え、その jqueryreplaceWith()関数を$(document).ready()関数にラップするだけです。

ただし、ページに移動すると、元の画像が入れ替わる前の一瞬だけ見ることができます。

画像の入れ替えが完了するまでページの読み込みを止める方法はありますか?

4

4 に答える 4

4

おそらく、<img>要素は何らかの方法 (src属性やなどid) で一意に識別できます。その場合は、ドキュメントの作成時にスタイルシートをすばやく追加します。このスタイルシートは<img>要素をターゲットにして、サイトから非表示にする必要があります。次に、.ready()ハンドラー中にスタイルシートを無効化/削除します。

var ss = document.createElement("style");
ss.textContent = "img[src='/path/to/img.png'] { visibility: hidden; }";
document.documentElement.childNodes[0].appendChild(ss);

$(document).ready(function () { 
    ss.parentNode.removeChild(ss);

    // swap image here
});
于 2011-04-20T18:43:01.787 に答える
2

番号。これを実行しようとすると、ページが「準備完了」状態にならず、画像を交換できる状態に到達しません。

于 2011-04-20T18:30:41.093 に答える
2

単なるアイデアです - これが機能するかどうかはわかりませんが、もしあなたが絶望的であるなら、試してみる価値があります.

画像を空白の画像を指す URL に$('img').live('onload', function(){...})置き換えるか、何も置き換えない場所に入れます。srcこれは、画像が表示されないようにするのに十分な速さである必要があり、document.ready呼び出し時に問題の画像を置き換えることができます。

于 2011-04-20T18:35:58.490 に答える
0

ページ読み込みイベントが完了した後、画像が完全に読み込まれるまで待つ必要があり、これを避けることはできないため、これは処理が難しい場合があります。しかし、次のようなものを使用できます：

最終的な画像が正常に読み込まれる前に、画像の読み込み元を設定できます

$('imageControl').load(function(){
    // do something when image is loaded completely
})
.error(function(){
    // handle if the image is not loaded
})
.attr('src', 'image source');

これが役に立てば幸いです、
よろしく

于 2011-04-20T18:58:43.820 に答える