Chrome does not display images on Refresh

Question

I am using roundabout jQuery plugin and it is working good on all browser except Chrome.

When I Inspect Element, I find all source code and parameters are correct and well defined.

Now, when I click on URL and hit Enter images shows up and when i refresh with F5 key images are not displaying.

I tried researching over Google and forums of chrome, i could not get that..

My current configuration tested on

Chrome  : Version 26.0.1410.64 m
OS      : Windows XP SP2, Windows 7 x86 Ultimate

And below are few workouts I tried,

1. Refreshed cache and deleted caches
2. Images path are correct
3. Making header content-type to text/html, text/css, and content-length to 1024
4. Used Other operating system and previous version of chrome
5. checked console if there any errors in JavaScript (Result : empty console, i.e. No Errors or warnings)

And i have added an image just for reference (may not be helpful)

Updated : code

<ul id="treemenu1" class="r-ul">
    <li><img src="images/img/img1.png"  /></li>

    <li><img src="images/img/img3.png" /></li>
    <li><img src="images/img/img2.png" /></li>
    <li><img src="images/img/img4.png"  /></li>

    <li><img src="images/img/img5.png"  /></li>
    <li><img src="images/img/img6.png"  /></li>
    <li><img src="images/img/img7.png"  /></li>

    <li><img src="images/img/img9.png"  /></li>
    <li><img src="images/img/img10.png"  /></li>
    <li><img src="images/img/img11.png"  /></li>
</ul>   


<script>
    $(document).ready(function() {
        $('ul').roundabout({
            'autoplay':true,
            'duration':3000
        });
    });
</script>

Added jsfiddle

http://jsfiddle.net/Twy8e/

And theres no problem is jsfiddle working on chrome.. and its working on chrome.. but when i n production it doesnot display images

Answer 1

I recently did have the same problem of loading images from the server-side, I made few changes with code but nothing seems helpful.

So I did a small trick of changing the image file-type from png to jpeg and everything went smooth from there.

Answer 2

When you generating images from server side, try to add random number to the source of images as look like <li><img src="images/img/img3.png?X" /></li> with X is random number.

For example:

<li><img src="images/img/img3.png?1" /></li>
<li><img src="images/img/img2.png?2" /></li>
<li><img src="images/img/img4.png?3" /></li>

Answer 3

Oh, I even used this pluggin and lot of problem and finally i got the solution.

set a paramenter 'debug':true and you will see empty div elements with all styles/css.

$(document).ready(function() {
    $('ul').roundabout({
        'autoplay':true,
        'duration':3000,
        'debug':true
    });
});

Now when you refresh, see the style/css then you will find height and width of div elements as 0px.

And set min-height and min-weight to css mentioned below or values you want and check that out..

I have seen you fiddle, i think that.. this css

li img {
    width: 100%;
}

you need to change that to

li img {
    min-height: 250px; /* or whatever */
    min-weight: 350px; /* or whatever */
}

And after you resolve, remove debug option or set it to false.

May be this should work for you, as i have got this problem and got the solution. I think its not the problem of chrome.. its pluggin thats not triggering the height and width of elements

Answer 4

use and try Tilled Characters or ../

 <li><img src="~/images/img/img1.png"  /></li>

or

 <li><img src="../images/img/img1.png"  /></li>

And see this some other discussions

CSS Background Images not loading

Chrome: background-images not rendered after refreshing page + javascript redirect

or Use $(window).load() instead of $(document).ready()

<script>
    $(window).load(function() {
        $('ul').roundabout({
            'autoplay':true,
            'duration':3000
        });

    });
</script>