webkit 浏览器没有完全加载图像答案

【问题标题】：webkit browser doesn't completely load imagewebkit 浏览器没有完全加载图像
【发布时间】：2011-08-21 01:20:39
【问题描述】：

我正在为客户构建一个网站，但我遇到了一个问题，即在 webkit 浏览器中图像无法完全加载。所以 chrome 和 safari，在 mac 和 ipad 上。 http://coatesconstruction.co.uk

我之前做过一些研究，发现一篇文章建议 webkit 浏览器打开每个图像的多个连接以下载它们，我想知道这是否不是问题。

这个网站的目标之一是使右列流畅，这样如果用户调整浏览器的大小，显示的图像就会增长，这意味着后端将图像保存为 1600 像素宽，而我使用 width: 100% 到使它们自动调整到左列。这意味着服务器上的图像非常庞大，这与阻止 chrome 和 safari 显示它们的大小有关吗？

【问题讨论】：

我把div.slideshow的高度改成了583px（之前是4px），图片就完全出现了。这是一个 CSS 问题。
我正在尝试使用 jquery 来获取图像的高度。我使用循环插件来更改图像。使用之后的事件我这样做。我可以硬编码高度并证明在 Firefox 中它会改变容器的高度，从而允许图像显示，甚至当我硬编码它太大时在底部添加一个间隙。它只是不会影响 webkit 浏览器中的容器。尝试在 .slideshow 和 .col1 上重置 css。使用萤火虫检查其工作。 $('.col1').css('height', function(){ return $('this').height(); });

【解决方案1】：

嗯，图片加载正常，问题是你正在裁剪它们:)

.col1, .col2, .col3 {
    overflow: hidden;
}

由于你所有的图片都设置了position:absolute，它们不会强制父容器变大，所以你的父容器被困在 124px 高。

【讨论】：

【解决方案2】：

它确实会加载整个图像。

您在 CSS 代码中的某个地方搞砸了，这就是为什么整个图像不会显示在 Webkit 浏览器上的原因。

尝试将 div#col1 的高度设置为 656 像素（或者您想要的任何高度！），您将看到整个图像。

【讨论】：

【解决方案3】：

.leftmenu .col1 {
    height: 765px;
}

【讨论】：