0

私はjavascriptを使用して、サイトの唯一のコンテンツとして全画面表示されていない.png画像を定期的に置き換えています。どのように試しても、Firefoxでは（firebugで見られるように）ロードされた後、新しい画像は常に上から下に描画されます。これには数秒かかります。これを防ぎ、一度に写真を表示する方法はありますか？

これは私の現在のjavascriptコードです：

function preloadScreenshotPeriodically(){
    var new_screenshot = new Image();
    new_screenshot.src = "screenshot.png?defeat_firefox_caching=" + counter;
    new_screenshot.id = "screenshot";   
    counter = counter + 1;
    new_screenshot.onload = function(){
        loadScreenshot(new_screenshot);
        setTimeout("preloadScreenshotPeriodically();", 5000);
    };
}

function loadScreenshot(new_screenshot){
    document.getElementById("screenshot").parentNode.replaceChild(new_screenshot, document.screenshot);
}

また、2つの画像を使用してみましたが、そのうちの1つは非表示になっています。次に、非表示の画像に画像をロードして交換します。同じ結果：/

他のバージョンでは、Ajaxで画像をフェッチし、読み込みが完了した後、img-tagのURLを変更しました。私の望みは、ブラウザが画像がすでにロードされていることを認識し、ロードするのではなく、ブラウザキャッシュからフェッチすることでした。しかし、これは起こらなかったので、サーバーに対して1つの画像を2回要求し、他の試行と同じようにゆっくりと描画することになりました。

編集： 今私は答え1で提案されたようにそれを試しました：次の画像をロードするときに画像を切り替えても問題なく動作しますが（これは必要ありません）、ロードされたらすぐに切り替えようとします（私はwant）は、上記のように空白のウィンドウ（非常に短い）と画像の表示されたロードをもたらします。

これは機能します：

<body>
<style type="text/css">
    #loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>

<script type="text/javascript">
    var screenshotCount=0;
    function showFirstImage() {
        loadNextImage();
    }

    function showNewImage() {
        loadNextImage();
    }

    function nextImageLoaded() {
    //  swapImage();
    }

    function loadNextImage() {
        swapImage();
        screenshotCount = screenshotCount +1;
        var nextImage = "<img id='loaderWinImg'     src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
        document.getElementById('loaderWin').innerHTML = nextImage;
    }

    function swapImage() {
        document.getElementById("loaderWinImg").onload = '';
        var newimage=document.getElementById('loaderWin').innerHTML;
        document.getElementById('imagewin').innerHTML = newimage;
    }
    var showImages = setInterval("showNewImage()",15000);
    showFirstImage();
</script>

</div>
</body>
</html>

これは機能しません：

<body>
<style type="text/css">
    #loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
</style>
<div id="imagewin"></div>
<div id="loaderWin"></div>

<script type="text/javascript">
    var screenshotCount=0;
    function showFirstImage() {
        loadNextImage();
    }

    function showNewImage() {
        loadNextImage();
    }

    function nextImageLoaded() {
        swapImage();
    }

    function loadNextImage() {
        screenshotCount = screenshotCount +1;
        var nextImage = "<img id='loaderWinImg'     src='screenshot.png?x="+screenshotCount+"' onload='nextImageLoaded()' />";
        document.getElementById('loaderWin').innerHTML = nextImage;
    }

function swapImage() {
    //  loadNextImage();
        document.getElementById("loaderWinImg").onload = '';
        var newimage=document.getElementById('loaderWin').innerHTML;
        document.getElementById('imagewin').innerHTML = newimage;
    }
    var showImages = setInterval("showNewImage()",15000);
    showFirstImage();
</script>

</div>
</body>
</html>

問題はここで見ることができます（上記のようなFirefoxの問題では、クロムでは画像の読み込みの間に一時停止がなく、画像の変更の間に空白のウィンドウがあります）：http://sabine-schneider.silbe.org:1666/test。 html

そして、ここで、Robが回答1で変更なしで提案したこと（Firefoxでは画像を正常に表示しますが、クロムでは表示しません-画像の変更の間に空白のウィンドウが表示されます）：http ：//sabine-schneider.silbe.org：1666 /test0.html

4

1 に答える 1

0

画像が「プログレッシブ」(インターレース) のように聞こえ、プリロードがダウンロードを完了するにはさらに時間が必要です。

より安定したプレゼンテーションのために、画像に幅と高さを設定することもできます

( ポス )

使用して

  ?defeat_firefox_caching=" + counter;

画像をキャッシュしないことを意味します（これはあなたの質問について私を混乱させました）-その行を削除します（あなたが言及していない何かのために必要でない限り）

更新：試してもらえますか...

 <style type="text/css">
   #loaderWin { display:block; height:1px; width:1px; overflow:hidden; }
 </style>

 <div id="imagewin"></div>

 <div id="loaderWin"></div>

  <script type="text/javascript">

    var screenshotCount=0;
    function showNewImage() {
    screenshotCount = screenshotCount +1;
     var newimage=document.getElementById('loaderWin').innerHTML;
     document.getElementById('imagewin').innerHTML = newimage;

     var nextImage = "<img src='screenshot.png?defeat_firefox_caching="+screenshotCoun+"'/>";
     document.getElementById('loaderWin').innerHTML = nextImage;

    }

    var showImages = setInterval("showNewImage()",5000);
  </script>
于 2012-05-15T20:44:54.560 に答える