Javascript Jquery循环+；Firefox压缩图像

我正在为一个图像库运行jQuery循环。查看链接：

我的问题是，在firefox中查看时，图像会被压扁。当我重新加载页面时，问题消失了。这让我相信Javascript是在加载所有图像之前触发的（通常第一个图像工作正常，其余图像被压扁）

硬的重新刷新重现了这个问题

我已将所有内容包装在$（document）.ready（function（）{}）中；但它仍然会发生

附加信息：如果我指定图像的宽度和高度，一切正常。然而，有数百张不同大小的图片

我对这个问题很失望。非常感谢您的任何想法/帮助

这是我的密码：

$(document).ready(function(){
//function onBefore(curr,next,opts) {
//    var $slide = jQuery(next);
//    var w = $slide.outerWidth();
//    var h = $slide.outerHeight();
//    $slide.css({
//        marginTop: (482 - h) / 2,
//        marginLeft: (560 - w) / 2
//    });
//};

// Decare the function that center the images...
function onBefore(curr,next,opts) {
    var $slide = jQuery(next);
    var w = $slide.outerWidth();
    var h = $slide.outerHeight();
    $slide.css({
        marginTop: (480 - h) / 2,
        marginLeft: (560 - w) / 2
    });
};


$(document).ready(function() {
    $('#slideshow').cycle({
     fx:     'fade', 
    next:   '#next', 
    pause: 0,
    speed: 500,
    before: onBefore,
    prev:   '#prev',
    pause:  '#pause',
    pager:  '.thumbs',
    pagerClick:function(zeroBasedSlideIndex, slideElement) {$(slideElement).find('div.cover').hide();},
    pagerAnchorBuilder: function(idx, slide) {
                        var src = $('img',slide).attr('src');
                        //Change height of thumbnail here
                         return '<li><a href="#"><img src="' + slide.src + '" height="90" /></a></li>'; 
                    
                } 
    });});});

$（文档）.ready（函数（）{
//函数onBefore（curr、next、opts）{
//var$slide=jQuery（下一步）；
//var w=$slide.outerWidth（）；
//var h=$slide.outerHeight（）；
//$slide.css({
//马金托普：（482-h）/2，
//边缘左侧：（560-w）/2
//    });
//};
//去中心化图像的功能。。。
函数onBefore（curr、next、opts）{
var$slide=jQuery（下一步）；
var w=$slide.outerWidth（）；
var h=$slide.outerHeight（）；
$slide.css({
马金托普：（480-h）/2，
边缘左侧：（560-w）/2
});
};
$（文档）.ready（函数（）{
$（“#幻灯片放映”）。循环({
外汇：“淡出”，
下一个：“#下一个”，
暂停：0，
速度:500,，
之前：onBefore，
上一页：“#上一页”，
暂停：“#暂停”，
寻呼机：'.thumbs'，
pagerClick:function（zeroBasedSlideIndex，slideElement）{$（slideElement.find（'div.cover'）.hide（）；}，
pagerAnchorBuilder:函数（idx、幻灯片）{
var src=$（'img'，slide）.attr（'src'）；
//在此处更改缩略图的高度
返回“
”；
} 
});});});

几个月前，我在一个网站上工作时遇到了同样的问题（链接如下）。如果您正在

$（document）.ready（）

中开始循环，则当客户端浏览到您的页面时会发生以下情况：

1） 客户端浏览器为每个

img

元素发送请求。这些请求需要不同的时间来完成

2） 在映像请求完成之前，循环开始。Cycle通过隐藏幻灯片放映中除第一个图像外的所有图像来工作：它在每个图像上设置

可见性：隐藏

和

显示：无

问题是，Firefox在显示样式设置为“无”时一次性地修复了

img

元素的大小。因此，如果图像尚未完成加载，其高度和宽度样式属性很小（我不确定它们到底对应什么-可能是Firefox图像占位符的大小）。当cycle通过将其“样式”属性设置为“显示：块”来显示图像时，它将使用隐藏时的任何尺寸

我通过更改代码来解决这个问题，这样在所有图像加载完成之前，它不会启动cycle插件。为此，我将一个计数器变量初始化为正在循环的图像数，然后将加载事件绑定到每个图像，如下所示：

var imagesRemaining = 12; // 12 is just the number of images in the slideshow div

$(document).ready(function() {
    $('#slideshow > img').bind('load', function(e) {
        imagesRemaining = imagesRemaining - 1;
        if (imagesRemaining == 0) {
            // I'm doing some other stuff when initializing cycle
            startCycle();
            // My images all start with visibility:hidden so they don't show
            // before cycle hides them in a 'stack', so ...
            $('#slideshow > img').css('visibility', 'visible');
        }
    });
});

function onBefore(curr, next, opts) { // Your code here ... }

function startCycle() {
    $('#slideshow').cycle({ ... // your initialization here });
}

---

您可以通过查看Firefox上的图库来查看它的运行情况。我正在动态构建库页面，因此它的结构与您的页面略有不同，但是如果你用Firebug浏览，你可以看到更多的细节。

我还想补充一点，添加宽度和高度属性似乎可以解决这个问题。

如果你使用数据库来填充幻灯片，你可以尝试从图像本身访问图像尺寸

例如，使用django，您可以使用

 width="{{ xxx.image.width }}px"  height="{{ xxx.image.height }}px" 

---

在你的img标签中。

好的，我知道这可能是调用load的一种非常全面的方式，但我只是可以将我的循环代码绑定到。load由于某种原因，它不起作用，所以我在

我无法强制大小，因为我在包含动态图像和数据的li中循环

---

它可能在某种程度上存在缺陷，但对于像我这样绝望的人来说…

乔希，你的解决方案刚刚让我省去了一个头疼的问题，非常感谢

我想我已经稍微修改了它，以便处理你不知道图片总数的页面。这对我来说似乎很好，如果有人能看到任何缺陷，请指出它们——我还在学习

$(document).ready(function () {
    $('#slideshow > img').each(
        function go() {
            $(this).bind('load', function (e) {
                projects();
                $('#slideshow > img').css('visibility', 'visible');
            });
         });
    });

function projects() {
    $('#slideshow').cycle({
        fx: 'scrollHorz',
        speed: 300,
        timeout: 0,
        next: '#next ',
        prev: '#prev ',
        after: onAfter,
        nowrap: 1,
        autostop: 1 
    });
}

---

我用了一个比已经提出的更简单更干净的解决方案来解决这个问题：

使用jQuery时，您需要使用

$（窗口）。加载
，而不是
$（文档）。为您的特定情况做好准备。要解决此问题，请更改以下内容：

$(document).ready(function() {
  $('#slideshow').cycle({
    /* ... */
  });
});

为此：

$(window).load(function() {
  $('#slideshow').cycle({
    /* ... */
  });
});

为什么这样做有效？因为
window.onload
在加载页面上所有引用的图像后触发（请参见和），这是您的情况下所需的行为<代码>$（document）.ready
，俗称“DOM就绪”，将在加载图像之前触发。这通常是您想要的行为，但在您的情况下，这还为时过早。
您可以使用类似于使youtube视频响应的解决方案。你需要知道你的宽度与高度的比率，并将其作为垫底添加到自行车div中。对于我的1024X680照片，我使用680/1024=66.4%

就你而言，我相信

#幻灯片放映{
垫底：66.4%；
}

将显示未运行的图像。我不知道您使用的实际高度和宽度值是多少，所以请用您自己的值代替。当$（window）.load解决方案被证明是极其无效的时候，我不得不使用这个解决方案——所以现在我同时使用这两种解决方案

这比设置图像的尺寸要好，因为它会滑入一个流动的、响应迅速的环境。
我对Jquery有些陌生，我该如何实现这一点？