Question

我正在使用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);
}

我还尝试使用两张图片，其中一张是隐藏的。然后将图片加载到隐藏的图片中并交换它们。相同的结果：/

在另一个版本中，我使用Ajax获取图像，加载完成后，更改了img-tag的url。我的希望是，浏览器会识别已经加载的图片并从browsercache中获取它而不是加载它。但这并没有发生，我最终向服务器发出两个请求，要求一张图片和同样慢的绘图，就像在我的其他版本中一样。

修改现在我尝试了它，就像在答案1中建议的那样。如果我在加载下一张图片时切换图片（我不想这样），它可以正常工作，尝试在加载后立即切换它（我想要的）如上所述，导致空白窗口（非常短）和可见的图片加载。

这有效：

<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问题，在chrome中，图片加载之间没有暂停，图片更改之间有一个空白窗口）：http://sabine-schneider.silbe.org:1666/test.html

在这里，Rob在答案1中建议没有任何更改（在Firefox中显示图片很好，但在chrome中没有显示 - 在图片更改之间我得到一个空白窗口）：http://sabine-schneider.silbe.org:1666/test0.html

Answer 1

听起来图像是“渐进式”（隔行扫描），预加载需要更多时间才能完成下载。

您还可以为图像设置宽度和高度，以获得更稳定的演示文稿

（poss）

使用

  ?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>

可见图像从上到下堆积：有没有一种方法可以一次显示？

1 个答案: