5

ブラウザで画像が完全にロードまたはダウンロードされた後に、画像をロードしたい。ダウンロード中に画像を表示したくありません。むしろ、高品質の画像がバックグラウンドで読み込まれるまでは、その画像の低品質バージョンを表示し、バックグラウンドで画像が完全に読み込まれると、低品質の画像をその画像に置き換えたいと考えています。

私は2つの画像を持っています

$LQimage = "LQabc.jpg";

$HQimg = "HQabc.jpg";

どうすればそれを機能させることができますか？

EDIT @codeboxによって投稿された回答で、このコードは機能しました..ありがとう:)

<html>
<head>
<script type="text/javascript">
function load(){
    var img = new Image();
    var imgUrl = 'HQabc.jpg';
    img.onload = function(){
        // this gets run once the image has finished downloading
        document.getElementById('pp').src = imgUrl;
    }
    img.src = imgUrl; // this causes the image to get downloaded in the background
}
</script>
</head>
<body onload="load()">
    <img id="pp" src="LQabc.jpg" width=600/>
</body>
</html>
4

1 に答える 1

5

これはそれを行う必要があります：

function preLoadImage(){
    var img = new Image();
    var imgUrl = 'HQabc.jpg';
    img.onload = function(){
        // this gets run once the image has finished downloading
        document.getElementById('idOfImgElement').src = imgUrl;
    }
    img.src = imgUrl; // this causes the image to get downloaded in the background
}

ページが読み込まれた後にこの関数を実行すると、動作するはずです。

<body onload="preLoadImage()">
于 2012-09-06T08:14:43.463 に答える