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

Answer 2

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

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

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

问题是Firefox在显示样式设置为无时修复了img元素的大小和所有的大小。因此，如果图像尚未完成加载，则其高度和宽度样式属性很小（我不确定它们对应的是什么 - 可能是Firefox图像占位符的大小）。当循环通过将其样式属性设置为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中this site上的图库来查看它的实际效果。我正在动态构建图库页面，因此它的结构与您的页面有点不同，但如果您使用Firebug，可以看到更多详细信息。

Answer 3

我还想补充说，添加宽度和高度属性似乎解决了这个问题。

Answer 4

好吧我知道它可能是一种调用load的糟糕方式，但我只是将我的循环代码绑定到.load因为某些原因它只是不起作用所以我在整个循环初始化器中调用了...

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

它可能在某种程度上存在缺陷，但对于那些像我一样绝望的人......

Answer 5

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

例如，使用django可以使用

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

在你的img标签中。

Answer 6

乔希，你的解决方案让我头疼，非常感谢你！

我想我已稍微修改了它，以便处理你不知道图像总数的页面。对我来说似乎工作得很好，如果有人能看到任何瑕疵，请指出它们 - 我还在学习。

$(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 
    });
}

Answer 7

您可以使用类似于使YouTube视频响应的解决方案。您需要知道宽度与高度的比率，并将其作为填充底部添加到循环div。对于我的1024X680照片，我使用了680/1024 = 66.4％

在你的情况下，我相信

#slideshow{ padding-bottom:66.4%; } 将显示图像unhrunk。我不知道您使用的实际高度和宽度值是什么，因此请替换您自己的。当$（window）.load解决方案被证明是无效的时候我不得不使用这个解决方案 - 所以现在我同时使用它们。

这比设置图像的尺寸更好，因为它会滑入流畅的响应环境。

Jquery Cycle + Firefox Squishing Images

7 个答案: