1

いくつかのコンテンツと画像を含むモバイル Web サイトがあります。

画像は最初 [display:none] に設定されていました。完全に読み込まれると、[display:block] に変わります。以下は私が何をしたかを示しています：

// Other website codes................

<div id='creative_div' style="display:none; width:100%;">
<img id='banner' src='http://www.example.com/my_image.jpg' style="width:100%;">
</div>

<script> 
window.onload=function(){
if (document.getElementById("banner").complete && document.getElementById("banner").naturalWidth != 0){
loadImage();
}
if (!document.getElementById("banner").complete || document.getElementById("banner").naturalWidth == 0){
hide('creative_div');
}
}
</script>

<script>
function loadImage() {
document.getElementById("creative_div").style.display="block";
}
</script>

// Other website codes............

したがって、この場合、ページの読み込み中に画像の読み込みが開始され、ページの読み込みが完了すると画像が表示されます。

ただし、Web サイトが完全に読み込まれているかどうかに関係なく、画像が読み込まれると表示されるようにしたいと思います。この問題について検索しましたが、ページが完全に読み込まれた後に Javascript を実行する必要があるようです。Javascriptに使用される「非同期」についても何かを見つけたので、それがどのように機能するのか本当にわかりません....

助言がありますか？皆さんありがとう。

4

2 に答える 2

1

解決しようとしている問題は完全には明らかではありませんが、onload ハンドラーを画像オブジェクト自体にアタッチすると、画像が読み込まれるときに、ページの残りの部分の読み込み状態に関係なく、画像自体が表示されるようになります (たとえば、ページの残りの部分がまだ読み込まれている場合でも)。

<img id='banner' onload='showme(this)' src='http://www.example.com/my_image.jpg'
 style="width:100%; display: none;">

function showme(obj) {
    obj.style.display = "block";
}

または、親コンテナーを表示したい場合は、次のようになります。

<img id='banner' onload='showme(this)' src='http://www.example.com/my_image.jpg'
 style="width:100%;">

function showme(obj) {
    obj.parentNode.style.display = "block";
}
于 2013-10-13T07:39:21.990 に答える