Question

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

有谁知道这个问题的解决方案是什么？非常感谢

Answer 1

在图片容器overflow:hidden

上使用DIV

Answer 2

使用$(window).load(function() { });而不是$(document).ready(function() { });

Answer 3

同样的问题。随机图像的内嵌样式为24px x 24px。我没有设置每个图像的高度和宽度，而是通过CSS完成。由于我的宽度是固定宽度，我设置了但设置高度为100％：

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

！important是重写jQuery循环应用的内联样式所必需的。

这似乎也解决了我在IE8中遇到的另一个问题。页面加载正常，但在加载了所有CSS和jquery之后，图像似乎正在加载。这导致盒子不扩展以适合其中图像的高度和宽度。我想设置宽度和高度，拿着图像的方框大小就是蝙蝠。

Answer 4

我有同样的问题，这让我发疯了！我尝试预加载图像，检查所有版本等等都无济于事。似乎唯一能解决的问题是在页面上的每张图片上设置宽度和高度，而不是在css中。

Answer 5

我通过在<img>标记中设置宽度和高度来解决这个问题。但是，由于我使用脚本生成图像列表，并且它们有时具有各种大小，我使用了一小部分PHP来解决这个问题：

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

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

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

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

Answer 6

虽然可能没有直接回答问题（我不知道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测试应该解决错误的24px占位符控制逻辑.one('load').each()的情况。涵盖缓存/远程控制流分割。

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

6 个答案: