Jquery Cycle + Firefox Squishing Images

Question

嘿伙计们,我正在为图片库运行jQuery Cycle.查看链接:这里

我的问题是在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>'; 

                } 
    });});});

Answer 1

有一个更简单,更清晰的解决方案,我用来解决这个问题比已经提出的解决方案:

使用jQuery,您需要使用$(window).load而不是$(document).ready针对您的特定情况.要解决此问题,请更改此设置:

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

对此:

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

为什么这样做？因为window.onload网页上的所有引用的图片后,大火被加载(见https://developer.mozilla.org/en/DOM/window.onload和.load() - jQuery的API),这是在您的情况所需的行为.$(document).ready,更好地称为"DOM Ready",将在图像加载之前触发.这通常是理想的行为,但在您的情况下,这还为时过早.

Answer 2

几个月前我在网站上工作时遇到了同样的问题（链接如下）。如果您在 中开始循环$(document).ready()，则当客户浏览您的页面时会发生以下情况：

1) 客户端浏览器发送对每个元素的请求img。这些请求需要不同的时间才能完成。

2) 在图像请求完成之前，循环开始。Cycle 的工作原理是隐藏幻灯片中除第一张图像之外的所有图像：它在每个图像上设置visibility:hidden和。display:none

问题在于，当显示样式设置为 none 时，img Firefox 会一劳永逸地修复元素的大小。因此，如果图像尚未完成加载，则其高度和宽度样式属性会很小（我不确定它们到底对应什么 - 也许是 Firefox 图像占位符的大小）。当 Cycle 通过将其 style 属性设置为 来显示图像时，它会使用隐藏时的任何尺寸。display:block

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

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 浏览，您可以看到更多详细信息。