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

Question

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

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

Answer 1

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

Answer 2

我通过在 标记中设置宽度和高度解决了这个问题。但由于我使用脚本来生成图像列表，并且它们有时具有不同的大小，所以我使用了一点 php 来解决这个问题：

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

例如， $imgsize[3] 是， 宽度=“585”高度=“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>

Answer 3

虽然可能不能直接回答这个问题（我不知道 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()。涵盖缓存/远程上的控制流分割。

Answer 4

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

Answer 5

在图像容器 DIV 上使用 overflow:hidden

Answer 6

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

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

!important 对于覆盖 jQuery 循环应用的内联样式是必要的。

这似乎也解决了我在 IE8 中遇到的另一个问题。页面可以正常加载，但图像似乎是在加载所有 CSS 和 jquery 之后才加载的。这导致该框无法扩展以适应其中图像的高度和宽度。我想象设置宽度和高度，保存图像的盒子立即调整大小。