从上到下的可见图像堆积:有没有办法一次显示

Visible Image buildup from top to bottom: is there a way to show in one stroke?

本文关键字：显示 一次 有没有 图像 从上到下      更新时间：2023-09-26

我正在使用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 中的建议进行了尝试。虽然如果我在加载下一张图片时切换图片(我不想要这个(，它会工作得很好，但尝试在加载图片后立即切换它(我想要的(会导致一个空白窗口(非常短(和可见的图片加载如上所述。

这有效：

<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

听起来图像

是"渐进式"(隔行扫描(，预加载需要更多时间才能完成下载。

您还可以为图像设置宽度和高度，以实现更稳定的演示

( 位置 (

用 

  ?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>
相关文章：