javascript - Jquery Cycle + Firefox 压缩图像

Question

我正在为图片库运行 jQuery Cycle。查看链接:Here

我的问题是在 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”，将在图像加载之前触发。这通常是所需的行为，但在您的情况下还为时过早。