Jquery Cycle + Firefox Squishing Bilder

Question

Hey Leute, ich laufe jQuery Cycle für eine Bildergalerie. Sehen Sie den Link an:

Mein Problem ist, dass die Bilder beim Betrachten in Firefox zerquetscht werden. Das Problem verschwindet, wenn ich die Seite neu lade. Dies führt mich zu der Annahme, dass das Javascript auslöst, bevor alle Bilder geladen sind (normalerweise funktioniert das erste Bild gut und der Rest wird zerquetscht).

Ein hartes wieder-frisches reproduziert das Problem.

Ich habe alles in ein $ (Dokument) .ready (function() {}) verpackt; aber es passiert immer noch.

Zusätzliche Informationen: Wenn ich die Breite und Höhe des Bildes angeben, funktioniert alles gut. Aber es gibt Hunderte von Bildern alle in verschiedenen Größen ..

Ich bin ziemlich frustriert mit diesem Problem. Irgendwelche Ideen/Hilfe wird sehr geschätzt!

Hier ist mein Code:

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

Ich hatte das gleiche Problem, wenn vor auf einer Website mehrere Monate (unten verlinkt) arbeiten. Wenn Sie den Zyklus in $(document).ready() starten, passiert Folgendes, wenn ein Client zu Ihrer Seite blättert:

1) Der Browser des Clients sendet eine Anforderung für jedes Element img. Diese Anfragen benötigen einen variablen Zeitaufwand.

2) Bevor die Bildanforderungen abgeschlossen sind, beginnt der Zyklus. Cycle funktioniert, indem alle bis auf das erste Bild in der Diashow ausgeblendet werden: Es setzt visibility:hidden und display:none auf jedem seiner Bilder.

Das Problem ist, dass Firefox die img Elementgröße ein für allemal an dem Punkt, an dem der Anzeigestil auf keine festgelegt ist. Wenn das Bild also nicht vollständig geladen wurde, sind die Attribute für die Höhe und Breite des Stils klein (ich bin mir nicht sicher, was genau damit übereinstimmt - vielleicht die Größe des Bildplatzhalters von Firefox). Wenn cycle das Bild anzeigt, indem es sein style-Attribut auf display:block setzt, verwendet es alle Dimensionen, die es zu der Zeit hatte, als es ausgeblendet wurde.

Ich löste dies, indem ich meinen Code änderte, so dass er das Zyklusplugin nicht startet, bis alle Bilder fertig geladen sind. Um das zu tun, initialisieren ich eine Zählervariable auf die Anzahl der Bilder, die ich bin Radfahren, binden dann ein Ladeereignis zu jedem Bild wie folgt aus:

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

Sie es in Aktion sehen können, indem sie die Galerien sehen auf this site in Feuerfuchs. Ich baue die Galerieseiten dynamisch auf, also ist sie etwas anders aufgebaut als deine Seite, aber du kannst mehr Details sehen, wenn du mit Firebug herumstocherst.

Answer 2

Ich möchte auch hinzufügen, dass es scheint, ein Attribut Breite und Höhe hinzufügen, löst dieses Problem.

Answer 3

Wenn Sie eine Datenbank verwenden, um die Diaschau zu füllen, können Sie versuchen, auf die Bilddimensionen aus dem Bild selbst zuzugreifen.

Zum Beispiel mit django können Sie

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

in Ihrem img-Tag.

Answer 4

Ok ich weiß, es ist wahrscheinlich eine awfull Weg Last zu nennen, aber ich coulnd nur mein Zyklus Code binden aus irgendeinem Grund .load es nicht so einfach arbeite ich den ganzen Zyklus initializer innerhalb der angerufene ...

ich kann nicht die Größen zwingen, da ich das Fahrrad durch li mit dynamischen Bildern und Daten

seine wahrscheinlich fehlerhaft auf einige verlängern, aber für diejenigen wie ich desperated ...

Answer 5

Josh, Ihre Lösung hat nur rettete mir Kopfschmerzen, vielen Dank!

Ich denke, ich habe es leicht geändert, um mit Seiten umzugehen, auf denen Sie die Gesamtzahl der Bilder nicht kennen. Es scheint für mich gut zu funktionieren, wenn irgendjemand irgendwelche Mängel sehen kann, bitte zeig sie - ich lerne immer noch.

$(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 6

a Es ist viel einfacher und saubere Lösung, die ich verwenden, um dieses Problem zu lösen, als was bereits vorgeschlagen:

Mit jQuery, müssen Sie $(window).load statt $(document).ready für Ihre spezielle Situation verwenden. Um das Problem zu beheben, ändern Sie diese:

$(document).ready(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

Um dies:

$(window).load(function() { 
    $('#slideshow').cycle({ 
    /* ... */ 
    }); 
}); 

Warum funktioniert das? Weil window.onload ausgelöst wird, nachdem alle referenzierten Bilder auf der Seite geladen wurden (siehe https://developer.mozilla.org/en/DOM/window.onload und .load() - jQuery API), was das gewünschte Verhalten in Ihrer Situation ist. $(document).ready, besser bekannt als "DOM Ready", wird ausgelöst, bevor die Bilder geladen wurden. Dies ist normalerweise das gewünschte Verhalten, aber in Ihrer Situation ist es zu früh.

Answer 7

Sie können eine ähnliche Lösung wie Youtube-Videos verwenden. Sie müssen das Verhältnis Ihrer Breite zur Höhe kennen und dieses als Padding-Bottom zum Rad-Div hinzufügen. Für meine 1024X680 Fotos, habe ich 680/1024 = 66,4%

In Ihrem Fall, glaube ich

#slideshow{ padding-bottom:66.4%; } das Bild ungeschrumpfte zeigen. Ich habe keine Ahnung, mit welcher Höhe und Breite du arbeitest, also setze deine eigenen ein. Ich musste diese Lösung verwenden, wenn die $ (window) .load-Lösung sich als ineffektiv unwirksam erwies - jetzt benutze ich beide.

Dies ist besser als die Abmessungen des Bildes einzustellen, da es in eine flüssige, reaktionsfreudige Umgebung gleitet.