7

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

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

4

6 回答 6

5

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

于 2010-10-15T13:52:24.320 回答
5

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

于 2012-04-11T09:36:36.217 回答
4

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

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

!important 是覆盖 jQuery 循环应用的内联样式所必需的。

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

于 2011-04-19T15:36:07.990 回答
3

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

于 2010-01-30T06:49:48.620 回答
0

我通过在<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>
于 2014-09-13T15:19:08.653 回答
0

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

于 2017-07-30T08:23:43.057 回答