Chrome无法在“刷新”上显示图像

Question

我正在使用roundabout jQuery插件，它在除Chrome之外的所有浏览器上运行良好。

当我Inspect Element时，我发现所有源代码和参数都是正确的并且定义良好。

现在，当我点击网址并点击Enter图片显示时，当我使用F5刷新时，关键图片不会显示。

我尝试过研究Google和Chrome的论坛，我无法理解......

我在

上测试了我当前的配置

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

以下是我尝试的一些训练，

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)

我添加了一张图片仅供参考（可能没有帮助）

更新：代码

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

添加了jsfiddle

http://jsfiddle.net/Twy8e/

并且没有问题是jsfiddle在chrome上工作..而且它在chrome上工作..但是在生产时它不显示图像

Answer 1

哦，我甚至使用了这个插件和很多问题，最后我得到了解决方案。

设置参数 'debug':true 你会看到所有样式/ css的空div元素。

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

现在当你刷新时，看到你会发现的样式/ css height width和div个0px元素为min-height。

并将min-weight和li img { width: 100%; } 设置为下面提到的css或您想要的值并检查出来..

我看到你小提琴，我想......这个css

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

您需要将其更改为

height

解决后，删除调试选项或将其设置为false。

这可能对你有用，因为我遇到了这个问题并得到了解决方案。我认为它不是铬的问题.. 它的插件不会触发width和{{1}}元素

Answer 2

使用并尝试Tilled Characters或../

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

或

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

并看到其他一些讨论

CSS Background Images not loading

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

或 使用$（window）.load（）而不是$（document）.ready（）

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

    });
</script>

Answer 3

从服务器端生成图像时，请尝试将随机数添加到图像源，如<li><img src="images/img/img3.png?X" /></li> X为随机数。

例如：

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

我最近确实遇到了从服务器端加载图像的相同问题，我对代码进行了一些更改，但似乎没有任何帮助。

所以我做了一个从png to jpeg更改图像文件类型的小技巧，一切顺利。