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 e 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>
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 e 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>
- Could you please post some code / create a fiddle? I'm also using Chrome so I could try to reproduce it. – pimvdb Commented Feb 25, 2011 at 16:04
- 2 It sound to me as if you need to preload your images. – Andre Backlund Commented Feb 25, 2011 at 16:07
- There are up to 1000 images, so I'd rather not preload. Probably rather than that I would drop the functionality to scroll though the pictures on this page. – russell Commented Feb 25, 2011 at 16:55
- Don't preload every image. Preload, say, 2 images ahead of where the user is. – Andre Backlund Commented Feb 25, 2011 at 17:01
- How do I go about preloading them? I tried "var im = new image(); im.src = xxx.jpg, but that does the same thing. The only thing that works seems to be actually putting an IMG tag in - I could do that for all of them and set display to none, but that seems like overkill. – russell Commented Feb 25, 2011 at 17:05
3 Answers
Reset to default 0maybe you may try to prefetch the image via ajax as explained in this : http://www.4thkingdom./public/puters/789073-web-site-speed-prefetching-images-css/view-post.html
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.
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./~st_rise/main/mainfram.htm?../imagery/imgscroll3h.htm
with a trick from www.ozzu./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