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);
}

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

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

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

在这里，Rob 在答案 1 中建议的内容没有任何更改（在 Firefox 中显示图片很好，但在 chrome 中不显示 - 在图片更改之间我得到一个空白窗口）：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 回答