Jquery Cycle + Firefox 压缩图像答案

【问题标题】：Jquery Cycle + Firefox Squishing ImagesJquery Cycle + Firefox 压缩图像
【发布时间】：2010-12-15 17:22:10
【问题描述】：

我正在为图片库运行 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>'; 
                    
                } 
    });});});

【问题讨论】：

标签： javascript jquery image jquery-cycle

【解决方案1】：

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

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

2) 在图像请求完成之前，循环开始。 Cycle 的工作原理是隐藏幻灯片中除第一张图片以外的所有图片：它在每张图片上设置 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 浏览一下，您可以看到更多详细信息。

【讨论】：

我对 Jquery 有点陌生，我该如何实现呢？

【解决方案2】：

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

【讨论】：

【解决方案3】：

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

例如使用django就可以使用

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

在您的 img 标签中。

【讨论】：

【解决方案4】：

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

由于我正在循环浏览包含动态图像和数据的 li，因此我无法强制调整尺寸

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

【讨论】：

【解决方案5】：

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

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

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

【讨论】：

【解决方案6】：

我用来解决这个问题的解决方案比已经提出的要简单得多：

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

【讨论】：

【解决方案7】：

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

我相信你的情况

#slideshow{ padding-bottom:66.4%; } 将显示未缩小的图像。我不知道您使用的实际高度和宽度值是多少，所以请替换您自己的。当 $(window).load 解决方案被证明非常无效时，我不得不使用这个解决方案——所以现在我同时使用这两种解决方案。

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

【讨论】：