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

Question

I have a photo album which cycles through a series of images when the user clicks on FORWARD or BACK, implemented by Javascript setting the src of an img. 我有一个相册，当用户点击FORWARD或BACK时循环显示一系列图像，由Javascript设置img的src实现。 It works properly on FF, Opera, IE, and Safari, but not in Chrome - in Chrome the images sometimes appear and sometimes are blank space. 它适用于FF，Opera，IE和Safari，但不适用于Chrome - 在Chrome中，图像有时会出现，有时会出现空白。 It appears if the images are cached they are visible, but if they have not been loaded already Chrome does not load them. 如果图像被缓存，则显示它们是可见的，但如果它们尚未加载，则Chrome不会加载它们。 I have confirmed the src is being set correctly in the element, it just is not displaying. 我已经确认src正在元素中正确设置，它只是没有显示。

If the images are loaded in the html for the page they show up properly when .src is set in javascript, but if they are not in the loaded html code then some of them will show up and some will not - but only in Chrome, in all other browsers it appears to work properly. 如果图像是在页面的html中加载的，当js中设置.src时它们会正确显示，但是如果它们不在加载的html代码中，那么它们中的一些会出现而有些则不会 - 但仅限于Chrome，在所有其他浏览器中，它似乎正常工作。

Is there some cache setting I need to use for Chrome, or a hack I can do to make sure these are loaded properly? 我需要为Chrome使用一些缓存设置，还是我可以做的黑客确保这些设置正确加载？

Thanks to all. 谢谢大家。

russell 罗素

(Added) Some code follows. （已添加）以下是一些代码。 It is generated, which is where the strange constants come from, and the file continues with a couple hundred more < li > elements 它是生成的，这是奇怪常量的来源，文件继续增加了几百个<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

Cache is apparently being cleared out. 缓存显然已被清除。 Network tab shows chrome thinks it is loading the image from cache, when I tried clearing cache everything worked. 网络选项卡显示chrome认为它正在从缓存加载图像，当我尝试清除缓存一切正常。 Possibly this is a bug, where cache is being cleaned out but the index is not updated? 可能这是一个错误，正在清理缓存，但索引没有更新？

Thanks for the suggestions. 谢谢你的建议。

Answer 3

I solved a similar problem arising from a reuse of Horizontal image scrolling -to see page wait for 20 second so timer go down- ~~http://www.btinternet.com/~st_rise/main/mainfram.htm?../imagery/imgscroll3h.htm~~ with a trick from ~~www.ozzu.com/programming-forum/javascript-sleep-function-t66049.html~~ 我解决了重复使用水平图像滚动引起的类似问题 - 看到页面等待20秒，所以计时器停止运行 - ~~http://www.btinternet.com/~st_rise/main/mainfram.htm?../~~ image ~~/ imgscroll3h.htm~~从一招~~www.ozzu.com/programming-forum/javascript-sleep-function-t66049.html~~

In my loop of loading image I call this function that simulate sleep. 在我的加载图像循环中，我调用这个模拟睡眠的函数。

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

You can see result in my site [elenco alloggi]: http://www.unitaria.it/interventi_u.html 您可以在我的网站[elenco alloggi]中查看结果： http ： //www.unitaria.it/interventi_u.html

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

问题描述

3 个解决方案

解决方案1
0 2011-02-25 16:07:25

解决方案2
0 已采纳 2011-02-25 23:58:19

解决方案3
0 2011-04-18 16:08:15

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

问题描述

3 个解决方案

解决方案1 0 2011-02-25 16:07:25

解决方案2 0 已采纳 2011-02-25 23:58:19

解决方案3 0 2011-04-18 16:08:15

解决方案1
0 2011-02-25 16:07:25

解决方案2
0 已采纳 2011-02-25 23:58:19

解决方案3
0 2011-04-18 16:08:15