Jquery Cycle + Firefox Squishing Images [英] Jquery Cycle + Firefox Squishing Images

问题描述

嘿伙计们，我正在为图片库运行jQuery Cycle。查看链接：此处

Hey guys, I'm running jQuery Cycle for an image gallery. View the link: Here

我的问题是在Firefox中查看图像时会被压扁。重新加载页面时问题消失了。这让我相信Javascript在加载所有图像之前就会触发（通常第一张图像工作正常，其余图像也会被压扁。）

My problem is that the images are getting squished when viewed in firefox. The problem disappears when I re-load the page. This leads me to believe that the Javascript is triggering before all the images are loaded (usually the first image works fine and the rest are squished.)

难以重新刷新重现问题。

A hard re-fresh reproduces the problem.

我把所有内容都包装在$（文件）.ready（function（）{}）中;但它仍然会发生。

I've wrapped everything in a $(document).ready(function(){ }); but it still happens.

其他信息：如果我指定图像的宽度和高度，一切正常。然而，有数百张图片都有不同的尺寸..

Additional Info: If I specify the width and height of the image, everything works fine. However there are hundreds of images all at different sizes..

我对此问题感到非常沮丧。任何想法/帮助非常感谢！

I'm pretty frustrated with this problem. Any ideas/help is greatly appreciated!

这是我的代码：

$(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>'; 

                } 
    });});});

推荐答案

我使用了一个更简单，更清洁的解决方案要比已经提出的问题解决这个问题：

There is a much simpler and cleaner solution that I used to solve this problem than what has already been proposed:

使用jQuery，你需要使用 $（window）.load 而不是 $（document）.ready 针对您的特定情况。要解决此问题，请更改此信息：

Using jQuery, you need to use $(window).load instead of $(document).ready for your particular situation. To fix the issue, change this:

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

Why does this work? Because window.onload fires after all referenced images on the page are loaded (See https://developer.mozilla.org/en/DOM/window.onload, and .load() - jQuery API), which is the desired behavior in your situation. $(document).ready, better known as "DOM Ready", will fire before images have loaded. This is typically the desired behavior, but in your situation it's too early.

这篇关于Jquery Cycle + Firefox Squishing Images的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！