Chrome 在刷新时不显示图像答案

【问题标题】：Chrome does not display images on RefreshChrome 在刷新时不显示图像
【发布时间】：2013-04-17 12:43:54
【问题描述】：

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

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

现在，当我点击 URL 并点击 Enter 时，图像会显示出来，而当我用 F5 刷新时，关键图像不会显示。

我尝试通过谷歌和 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 上工作.. 但是在生产时它不显示图像

【问题讨论】：

可以放一段代码吗？
你能写一个jsfiddle.net吗？

标签： jquery image google-chrome caching

【解决方案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 设置为下面提到的 css 或您想要的值并检查一下..

我见过你小提琴，我认为.. 这个 css

li img {
    width: 100%;
}

你需要把它改成

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

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

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

【讨论】：

【解决方案2】：

当您从服务器端生成图像时，请尝试将随机数添加到图像源中，就像 <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>

【讨论】：

【解决方案3】：

使用并尝试 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>

【讨论】：

我浏览了那篇文章，但没有找到任何帮助，而且我没有处理背景图片。为什么/什么是在图片之前使用~。

【解决方案4】：

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

所以我做了一个小技巧，将图像文件类型从 png to jpeg 更改为从那里开始一切顺利。

【讨论】：