jQuery.Cycle在首次加载时显示小图像

Question

我遇到了jQuery.cycle插件的问题。在页面首次加载（当图像没有被缓存时），它会显示小图像，就像缩略图一样。你可以在以下链接中看到这个问题（编辑：抱歉，旧链接） - 只需等待第二张图像显示 - 它是小的。重新加载/刷新可以解决，但这不是真正的解决方案，你知道。

有人知道这个问题的解决方案吗？非常感谢。

- A123321

---

一切在FF 3.6 RC2上都运行正常。在Chrome 4.0.249.64 (beta)上也是如此，甚至在IE6上也可以。你用什么浏览器？ - kjagiello

我支持Balon的说法。在OS X中使用FF，在Windows中使用IE7 - 看起来很棒。 - jay

你好，我使用的是Opera/Win7系统，在IE8和FF3.5上也测试过了。我的客户好像用的是Safari/Mac，但是很多人反映有一些问题 :-( - A123321

Answer 1

在图片容器

上使用overflow:hidden。

- acidrain

---

虽然这并没有解决 OP 的问题，但它确实解决了所有图像的闪烁问题。 - Benjam

Answer 2

使用 $(window).load(function() { }); 而不是 $(document).ready(function() { }); 。这是针对IT技术方面的建议，前者会在页面中所有元素都加载完成后再执行函数，而后者则是在DOM树加载完成后立即执行函数。

- Tom

Answer 3

遇到了同样的问题。随机图片会获得 24px x 24px 的内联样式。我没有通过设置每个图像的高度和宽度来解决这个问题，而是通过 CSS 来设置。由于我的宽度是固定的，所以我设置了宽度，但将高度设置为 100%：

.ParentDiv img { width: 400px !important; height: 100% !important; }

!important是必须的，以覆盖jQuery cycle应用的内联样式。

这也似乎解决了我在IE8上遇到的另一个问题。页面加载得很好，但图像似乎是在所有CSS和jquery加载后才加载的。这导致框无法展开以适应其中的图像的高度和宽度。我想设置宽度和高度，箱子中的图像就被正确地大小化了。

- sclev

Answer 4

我曾经遇到过同样的问题，让我非常困扰！我尝试了预加载图片、检查所有版本等方法，但都没有用。唯一有效的方法是在页面上为每个图片设置宽度和高度，而不是在CSS中设置。

- Oliver Tani

---

是的，这也是我在尝试了无数其他方法后所做的。 - John Hunt

Answer 5

虽然可能不是直接回答问题（我不知道jQuery.cycle插件），但这里的许多答案都解决了加载后处理图像的问题，这也是人们来到这里寻求帮助的原因。所以这就是发生了什么：

24px是由于浏览器端的错误逻辑导致的 - 为占位符控件过早返回尺寸。它们有一个不同的控制逻辑来处理缓存的图像，IE甚至不会为它们触发onload事件，这就是所有混淆的原因。

比在互联网上找到的(width===0)检查更可靠的是，.complete DOM属性似乎被所有主要浏览器支持：http://www.w3schools.com/jsref/prop_img_complete.asp 这对我有用：

$("img")
    .one('load', onLoadRoutine)
    .each(function() {
        if(!this.complete) {
            return; //.one() will fire eventually
        } else {
            onLoadRoutine({delegateTarget:this}); //fake event object
        }
    });

请注意事件模拟对象{delegateTarget:this}。更好的选择应该是jQuery(this).trigger('load')，但我不能推荐它，因为当时我没有尝试过... .complete测试应该解决有故障的24像素占位控件逻辑的问题，.one('load').each()覆盖了在缓存/远程上的控制流分割。

- informatik-handwerk.de

Answer 6

我通过在<img>标签中设置宽度和高度来解决了这个问题。但由于我正在使用脚本生成图像列表，而它们有时具有不同的大小，因此我使用了一点点PHP来解决这个问题：

function displayimage($filename) {
    $imgsize = getimagesize("$filename");
    echo "<img src=\"$filename\" $imgsize[3] />\n";
}

$imgsize [3] 例如，width="585" height="285"。

然后，为了在幻灯片中显示目录中的所有jpg：

<div class="slideshow">
<?php
foreach (glob("*.jpg") as $filename) {
    displayimage($filename);
}
?>
</div>

输出

<div class="slideshow">
<img src="cat.jpg" width="575" height="256" />
<img src="dog.jpg" width="475" height="350" />
<img src="frog.jpg" width="675" height="300" />
</div>

- jimmy