Jquery Cycle + Firefox Squishing Images
嘿伙计们，我正在为图片库运行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 '
有一个更简单，更清晰的解决方案，我用来解决这个问题，而不是已经提出的解决方案：
使用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”，将在图像加载之前触发。 这通常是理想的行为，但在您的情况下，这太早了。
几个月前在网站上工作时我遇到了同样的问题（链接如下）。 如果您在$(document).ready()开始循环，那么当客户端浏览您的页面时会发生以下情况：
1）客户端的浏览器发送每个img元素的请求。 这些请求需要不同的时间来完成。
2）在图像请求完成之前，循环开始。 循环工作通过隐藏幻灯片放映中除第一个图像之外的所有图像：它在每个图像上设置visibility:hidden和display:none 。
问题是Firefox 在显示样式设置为none时一劳永逸地修复了img元素的大小。 因此，如果图像尚未完成加载，其高度和宽度样式属性很小（我不确定它们对应的确切位置 – 可能是Firefox图像占位符的大小）。 当循环通过将其样式属性设置为display:block来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中查看此网站上的图库来查看它。 我正在动态构建图库页面，因此它的结构与您的页面有点不同，但如果您使用Firebug，可以看到更多详细信息。
我还想补充说，添加宽度和高度属性似乎解决了这个问题。
好吧我知道它可能是一种调用load的可怕方式，但我只是将我的循环代码绑定到.load因为某些原因它只是不起作用所以我在整个循环初始化器中调用了…
我不能强迫尺寸，因为我骑自行车穿过包含动态图像和数据的li
它可能在一定程度上存在缺陷，但对于那些像我一样绝望的人……
乔希，你的解决方案让我很头疼，非常感谢你！
我想我已稍微修改它以处理你不知道图像总数的页面。 对我来说似乎工作得很好，如果有人能看到任何瑕疵，请指出 – 我还在学习。
$(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 }); }
如果您使用数据库填充幻灯片，则可以尝试从图像本身访问图像尺寸。
例如，使用django即可使用
width="{{ xxx.image.width }}px" height="{{ xxx.image.height }}px"
在你的img标签中。
您可以使用类似于使YouTubevideo响应的解决方案。 您需要知道宽度与高度的比率，并将其作为填充底部添加到循环div。 对于我的1024X680照片，我使用了680/1024 = 66.4％
在你的情况下，我相信
#slideshow{ padding-bottom:66.4%; } 将显示图像unhrunk。 我不知道您使用的实际高度和宽度值是什么，因此请替换您自己的。 当$（window）.load解决方案被certificate是无效的时候我不得不使用这个解决方案 – 所以现在我使用它们。
这比设置图像的尺寸更好，因为它可以滑入流畅的响应环境中。