5

JavaScript による画像の読み込みについて説明している多くのトピックを見つけましたが、正確には探しているものではありません。

私は現在、通常の方法でhtmlに画像をロードしています

<img src="images/big-image.jpg">

これにより、空のスペースが上から下まで読み込み中の画像で埋められた Web ページが作成されます。さらに、画像のファイルサイズを常に監視する必要があります。

私が達成したいのは、ページが読み込まれると、すべての画像の縮小バージョン (約 10kb) が表示されることです。ページが完全に読み込まれると、バックグラウンドで大きな画像を読み込み、読み込まれたときにそれらを置き換える JavaScript 関数が必要です。

私はすでにJavaScriptでこれを行う方法を見つけましたが、すべての画像が置き換えられるまで、ブラウザは彼が「読み込み中」状態にあることを示しています. 非同期メソッドを使用してバックグラウンドで読み込みタスクを実行することは可能ですか?

<img src="small.jpg" id="image">

<script>
        <!--
            var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
        //-->
</script>
4

2 に答える 2

4

本当に迷惑なことを知っていますか？window.onload 関数を独自のソリューションに追加するのを忘れただけで、思いどおりに機能する場合...

アイデアありがとうございます！:D

<img src="small.jpg" id="image">

<script>
        <!--
            window.onload = function() {
                var img = new Image(); 
            img.onload = function() { 
               change_image(); 
            } 
            img.src = "small.jpg";  

            function change_image() {
                document.getElementById("image").src = "big.jpg";
            }
            };


        //-->
</script>
于 2013-04-04T14:16:34.703 に答える
4

これを試しましたか？

window.onload = function() {
    setTimeout(function() {
        // XHR to request a JS and a CSS
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.js');
        xhr.send('');
        xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://domain.tld/preload.css');
        xhr.send('');
        // preload image
        new Image().src = "http://domain.tld/preload.png";
    }, 1000);
};

http://perishablepress.com/3-ways-preload-images-css-javascript-ajax/

于 2013-04-04T14:10:35.220 に答える