Chrome在JavaScript中设置img src时无法加载

Question

Chrome在JavaScript中设置img src时无法加载

5

我有一个相册，当用户点击“前进”或“后退”时，通过Javascript设置img的src来循环显示一系列图像。在FF、Opera、IE和Safari上它可以正常工作，但在Chrome上不行-在Chrome上，图像有时会出现，有时会是空白的。如果这些图像被缓存了，它们就可见了，但如果它们还没有被加载，Chrome就不会加载它们。我已经确认在元素中正确设置了src，只是没有显示出来。

如果这些图像在页面的html中被加载，当在javascript中设置.src时，它们会正确显示，但如果它们没有在加载的html代码中，则其中一些会显示出来，而另一些则不会-但只在Chrome中，在所有其他浏览器中似乎都可以正常工作。

是否有某些缓存设置我需要在Chrome中使用，或者我可以做一些hack来确保这些图像被正确加载？

谢谢大家。

russell

（添加）下面是一些代码。它是生成的，这就是奇怪的常量来自哪里，文件继续包含另外几百个

元素。

<HTML>
<HEAD>
  <link href="../lame.css" rel="stylesheet" type="text/css">
  <TITLE>Young/Haraske slides</TITLE>
  <script src="../lame.js"></script>
  <script>

    var int2atts = [], int2path = [], paths = {}, atts;

      atts = {}

        int2atts[36] = atts;
        int2path[36] = "Families/Young/Russell"

      window.onload = function() {substituteNodeInfo(); showPage(254);}
      var imagePtr = 0;
      function nextImage(i) {

         imagePtr = (imagePtr + i + 254) % 254;
         var nextSrc = document.getElementById("photo" + imagePtr).src
         var mainImage = document.getElementById("MainImage");
         var src = mainImage.src;
         mainImage.src = src.substring(0, src.lastIndexOf("/")) + nextSrc.substring(nextSrc.lastIndexOf("/"));

         return false;
      }                
    </script>
</HEAD>
<BODY id="pathBody">
  <H1 id="pageTitle">Russell</H1>
  <div>
    <img id="MainImage" src="../pictures/1845DEC61.JPG"></img>
    <h3 id="Title">Russell</h3>
    <div id="Text"></div>

    <a href="" onclick="return nextImage(-1)">Previous</a> 
    <a href="" onclick="return nextImage(1)">Next</a>
    <p />

    This filter is included in the following paths:
    <ul class="paths">

        <li class="path"><a href="../folders/Russell.html?path=36">Families/Young/Russell</a></li>

    </ul>
  </div>
  <div class="choosePage"></div>
  <ul id="gallery" class="filteredItems">

      <li id="listing0" class="lineblock"><p>
          <a class='folder' href="../items/1845DEC61.html">
            <img id="photo0" src='../thumbnails/1845DEC61.JPG' alt='1845DEC61.JPG'>
            <br />Image page</a>/<a href="../fullsize/1845DEC61.JPG">Full size</a>
          <br />1845DEC61.JPG
      </li>

      <li id="listing1" class="lineblock"><p>
          <a class='folder' href="../items/1669.html">
            <img id="photo1" src='../thumbnails/1669.JPG' alt='1669.JPG'>
            <br />Image page</a>/<a href="../fullsize/1669.JPG">Full size</a>
          <br />1669.JPG
      </li>

- russell

请问您能否发布一些代码或创建一个fiddle？我也在使用Chrome，所以我可以尝试复现它。 - pimvdb

2

听起来好像你需要预加载图片。 - Andre Backlund

有多达1000张图片，所以我宁愿不预加载。也许我会放弃在此页面上滚动浏览图片的功能。 - russell

我该如何预加载它们？我尝试了“var im = new image(); im.src = xxx.jpg”，但效果相同。唯一有效的方法似乎是实际上放置一个IMG标签 - 我可以为它们中的所有图像执行此操作并将显示设置为none，但这似乎有些过度。 - russell

这个 bug 还存在吗？我现在正在使用 Xilium CefGlue C# 和嵌入式 Chromium，遇到了完全相同的问题（在这里提问 2 年后！）。我正在动态添加大约 800 个带有 IMG 的 DIV。一些图像正在加载，一些则没有（显示损坏的图像图标）。目前没有解决方法，已尝试了所有可能的方法。 - Markus Wolters

显示剩余2条评论

3个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- gianni rossini · Answer 1

我曾经解决过一个类似的问题，这个问题是由于水平图像滚动重用而引起的 - 要查看页面，请等待20秒，以便计时器倒数 - 使用了来自 ~~http://www.btinternet.com/~st_rise/main/mainfram.htm?../imagery/imgscroll3h.htm~~ 的技巧和 ~~www.ozzu.com/programming-forum/javascript-sleep-function-t66049.html~~。

在我的图像加载循环中，我调用了这个模拟睡眠的函数。

function pause( iMilliseconds ) {
    var sDialogScript = 'window.setTimeout( function () { window.close(); }, ' + iMilliseconds + ');';
    window.showModalDialog('javascript:document.writeln ("<script>' + sDialogScript + '<' + '/script>")');
}

您可以在我的网站上查看结果 [住宿列表]: http://www.unitaria.it/interventi_u.html

- russell · Answer 2

缓存似乎被清空了。网络标签页显示Chrome认为正在从缓存中加载图片，当我尝试清除缓存时，一切都正常了。可能这是一个错误，缓存被清除，但索引没有更新?

感谢您的建议。

- Vinze · Answer 3

或许你可以尝试通过Ajax预取图像，就像这个链接所解释的那样：http://www.4thkingdom.com/public/computers/789073-web-site-speed-prefetching-images-css/view-post.html