Chrome is not loading img src when set in javascript

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. It works properly on FF, Opera, IE, and Safari, but not in Chrome - in Chrome the images sometimes appear and sometimes are blank space. It appears if the images are cached they are visible, but if they have not been loaded already Chrome does not load them. I have confirmed the src is being set correctly in the element, it just is not displaying.

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.

Is there some cache setting I need to use for Chrome, or a hack I can do to make sure these are loaded properly?

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

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

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

Chrome is not loading img src when set in javascript

Question

3 answers

solution1
0 2011-02-25 16:07:25

solution2
0 ACCPTED 2011-02-25 23:58:19

solution3
0 2011-04-18 16:08:15

Chrome is not loading img src when set in javascript

Question

3 answers

solution1 0 2011-02-25 16:07:25

solution2 0 ACCPTED 2011-02-25 23:58:19

solution3 0 2011-04-18 16:08:15

solution1
0 2011-02-25 16:07:25

solution2
0 ACCPTED 2011-02-25 23:58:19

solution3
0 2011-04-18 16:08:15