Jquery Cycle + Firefox 压缩图片

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>'; 
                    
                } 
    });});});

- user184106

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就绪”，将在图像加载之前触发。这通常是期望的行为，但在你的情况下太早了。

- Phil Harvey

Answer 2

我在几个月前处理一个网站时也遇到了同样的问题（下面链接有关）。如果你在$(document).ready()中开始循环，当客户端浏览你的页面时会发生以下情况：

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

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

问题在于Firefox在显示样式被设置为none时就一劳永逸地修正了img元素的大小。因此，如果图像还没有加载完成，它的高度和宽度样式属性就很小（我不确定它们确切对应什么——也许是Firefox的图像占位符的大小）。当循环通过将其样式属性设置为display:block来显示图像时，它使用的是它在被隐藏时具有的任何尺寸。

我通过更改代码使其在所有图像加载完成后再启动循环插件来解决了这个问题。为此，我将计数器变量初始化为我要循环的图像数量，然后绑定一个load事件到每个图像上，如下所示：

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进行探索，就可以看到更多细节。

- Jeff Sternal

---

我对JQuery有点新，我应该如何实现这个？ - user184106

Answer 3

我想补充一点，似乎添加width和height属性可以解决这个问题。

- Joshua Cody

Answer 4

好的，我知道这可能是一种糟糕的调用load的方式，但由于某些原因，我无法将我的循环代码绑定到.load上，所以我在整个Cycle初始化器内部调用了它...

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

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

- jonathan

Answer 5

Josh，你的解决方案刚刚帮我省去了一次头痛，非常感谢！

我做了一些修改，以便处理那些不知道图片总数的页面。对我来说似乎运行良好，如果有人发现任何缺陷，请指出 - 我还在学习中。

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

- leeboyce

Answer 6

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

例如，使用django，您可以使用以下代码：

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

在你的img标签中。

- Timbadu

Answer 7

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

在您的情况下，我相信

``` #slideshow{ padding-bottom:66.4%; } ```

将显示未缩小的图像。 我不知道您正在使用的实际高度和宽度值，因此请替换您自己的值。 当$(window).load解决方案证明令人恼火而无效时，我不得不使用此解决方案-现在我同时使用两者。

这比设置图像的尺寸更好，因为它可以轻松地滑动到流体响应式环境中。

- d36williams