Question

我有一个相册，当用户点击FORWARD或BACK时循环显示一系列图像，由Javascript设置img的src实现。它适用于FF，Opera，IE和Safari，但不适用于Chrome - 在Chrome中，图像有时会出现，有时会出现空白。如果图像被缓存，则显示它们是可见的，但如果它们尚未加载，则Chrome不会加载它们。我已经确认src正在元素中正确设置，它只是没有显示。

如果图像是在页面的html中加载的，当jsc中设置.src时它们会正确显示，但是如果它们不在加载的html代码中，那么它们中的一些会出现而有些则不会 - 但只是在Chrome中，在所有其他浏览器中，它似乎正常运行。

我是否需要为Chrome使用一些缓存设置，或者我可以做些什么来确保正确加载这些设置？

感谢所有人。

罗素

（已添加）以下是一些代码。它被生成，这是奇怪的常量来自的地方，并且文件继续增加几百个＆lt; li>元素

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

Answer 1

也许您可以尝试通过ajax预取图像，如下所述：http://www.4thkingdom.com/public/computers/789073-web-site-speed-prefetching-images-css/view-post.html

Answer 2

缓存显然已被清除。网络选项卡显示chrome认为它正在从缓存加载图像，当我尝试清除缓存一切正常。可能这是一个错误，缓存被清除但索引没有更新？

感谢您的建议。

Answer 3

我解决了因重复使用水平图像滚动而产生的类似问题 - 看到页面等待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>")');
}

您可以在我的网站[elenco alloggi]中看到结果：http://www.unitaria.it/interventi_u.html

在javascript中设置时，Chrome不会加载img src

3 个答案: