Jquery 循环在第一次加载时显示小图像

Jquery 循环在第一次加载时显示小图像,jquery,image,cycle,Jquery,Image,Cycle,我对jQuery.cycle插件有问题。在第一次加载页面时(当img未被缓存时),它会显示小img,比如缩略图。你可以在(编辑:对不起,旧链接)上看到它-当第二个img显示时,请稍候-它很小。重新加载/刷新解决了这个问题,但你知道,这不是真正的解决方案 有人知道这个问题的解决办法吗?非常感谢我也有同样的问题,这让我发疯了!我试着预加载图片,检查所有东西的版本等等,但都没有用。。唯一能解决这个问题的方法是在页面上的每张图片上设置宽度和高度,而不是在css中设置。在图像容器DIV上使用overflo

我对jQuery.cycle插件有问题。在第一次加载页面时(当img未被缓存时),它会显示小img,比如缩略图。你可以在(编辑:对不起,旧链接)上看到它-当第二个img显示时,请稍候-它很小。重新加载/刷新解决了这个问题,但你知道,这不是真正的解决方案


有人知道这个问题的解决办法吗?非常感谢

我也有同样的问题,这让我发疯了!我试着预加载图片,检查所有东西的版本等等,但都没有用。。唯一能解决这个问题的方法是在页面上的每张图片上设置宽度和高度,而不是在css中设置。

在图像容器
DIV
上使用
overflow:hidden
。随机图像得到了24px x 24px的内联样式。我不是通过CSS设置每个图像的高度和宽度。因为我的宽度是固定宽度,所以我将其设置为固定宽度,但将高度设置为100%:

.ParentDiv img { width: 400px !important; height: 100% !important; }
这个!重要信息是重写jQuery循环应用的内联样式所必需的


这似乎也解决了我在IE8上遇到的另一个问题。页面可以很好地加载,但是在加载所有CSS和jquery之后,图像似乎正在加载。这导致长方体无法展开以适应其中图像的高度和宽度。我想象一下,设置宽度和高度时,放置图像的盒子的大小是直接调整的。

使用
$(window).load(function(){})而不是
$(文档).ready(函数(){})

我通过在

虽然可能没有直接回答这个问题(jQuery.cycle插件我不知道),但这里的许多答案都解决了加载后处理图像的问题,这也是人们来这里寻求的。下面是正在发生的事情:

24px出现的原因是浏览器端的逻辑错误-过早返回占位符控件的尺寸。它们有不同的控制逻辑来处理缓存的图像,即它们甚至不会触发
onload
,这就是为什么会出现所有混乱的原因

(width==0)更可靠
检查如果加载了图像,则可以在整个internet上找到
.complete
DOM属性,这一属性很少被提及,显然受到所有主要浏览器的支持:

这对我很有用:

<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>
注意事件模型对象
{delegateTarget:this}
。最好是
jQuery(this).trigger('load')
,但我不能推荐它,因为我当时没有尝试过


.complete
测试应解决24px占位符控件逻辑故障的情况,即
.one('load')。each()
。涵盖缓存/远程上的控制流拆分。

在FF 3.6 RC2上一切正常。在Chrome4.0.249.64(beta版)上,甚至在IE6上。你用什么浏览器?我支持巴伦说的。windows操作系统X和IE7中的FF-看起来很棒。见鬼,我正在使用Opera/Win7,也在IE8和FF3.5中进行了测试。我的客户有Safari/Mac,我想,我已经从大量的ppl中得到了关于这个问题的回应:-(是的,这也是我在尝试了一百万其他事情后所做的。虽然这并不能解决OP问题,但它确实解决了所有图像的闪烁问题。
<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>
$("img")
    .one('load', onLoadRoutine)
    .each(function() {
        if(!this.complete) {
            return; //.one() will fire eventually
        } else {
            onLoadRoutine({delegateTarget:this}); //fake event object
        }
    });