Jquery Cycle + Firefox Squishing Immagini

Question

Hey ragazzi, sto eseguendo jQuery Cycle per una galleria di immagini. Visualizza il collegamento: Here

Il mio problema è che le immagini vengono schiacciate quando visualizzate in Firefox. Il problema scompare quando ricarico la pagina. Questo mi porta a credere che Javascript venga attivato prima che tutte le immagini vengano caricate (di solito la prima immagine funziona bene e il resto è schiacciato.)

Un re-fresh difficile riproduce il problema.

Ho avvolto tutto in un $ (documento) .ready (function() {}); ma succede ancora.

Ulteriori informazioni: Se si specifica la larghezza e l'altezza dell'immagine, tutto funziona correttamente. Tuttavia ci sono centinaia di immagini tutte di diverse dimensioni ..

Sono abbastanza frustrato da questo problema. Ogni idea/aiuto è molto apprezzata!

Ecco il mio codice:

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

Ho avuto lo stesso problema quando si lavora su un sito di diversi mesi fa (link sottostante). Se stai iniziando il ciclo nel $(document).ready(), ecco cosa succede quando un cliente visita la tua pagina:

1) Il browser del client invia una richiesta per ogni elemento img. Queste richieste richiedono un tempo variabile per essere soddisfatte.

2) Prima che le richieste di immagine siano completate, viene avviato il ciclo. Cycle funziona nascondendo tutti tranne la prima immagine nella presentazione: imposta visibility:hidden e display:none su ciascuna delle immagini.

Il problema è che Firefox corregge le dimensioni dell'elemento img una volta per tutte nel punto in cui lo stile di visualizzazione non è impostato su. Quindi, se l'immagine non ha terminato il caricamento, gli attributi di stile di altezza e larghezza sono piccoli (non sono sicuro esattamente a cosa corrispondono - forse la dimensione del segnaposto immagine di Firefox). Quando cycle mostra l'immagine impostando il suo attributo style su display:block, usa le dimensioni che aveva al momento in cui era nascosto.

Ho risolto questo problema modificando il mio codice in modo che non avvii il ciclo plug-in finché tutte le immagini non sono state caricate. Per fare questo, ho inizializzare una variabile contatore al numero di immagini che sto in bicicletta, quindi associare un evento carico di ogni immagine in questo modo:

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

Lo si può vedere in azione visualizzando le gallerie sulla this site in Firefox. Sto costruendo le pagine della galleria in modo dinamico, quindi è strutturato un po 'in modo diverso rispetto alla tua pagina, ma puoi vedere più dettagli se ti curi con Firebug.

Answer 2

Vorrei aggiungere che sembra che l'aggiunta di un attributo width e height risolva questo problema.

Answer 3

Se si utilizza un database per popolare la presentazione, è possibile provare ad accedere alle dimensioni dell'immagine dall'immagine stessa.

Ad esempio, utilizzando Django è possibile utilizzare

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

nel tag IMG.

Answer 4

Ok So che la sua probabilmente un modo orribile di chiamare carico, ma ho appena coulnd lego il mio codice ciclo .load per qualche motivo non funzionano così ho chiamato l'intero ciclo di inizializzazione all'interno del ...

non ho potuto forzare le dimensioni dal momento che sono in bicicletta attraverso li contenente immagini dinamiche e dati

la sua, probabilmente viziata in certa misura, ma per chi come me ... come desperated

Answer 5

Josh, la soluzione ha appena mi ha salvato un mal di testa, grazie mille!

Penso di aver modificato leggermente per gestire le pagine in cui non si conosce il numero totale di immagini. Sembra che stia funzionando bene per me, se qualcuno può vedere qualche difetto, per favore indicalo - sto ancora imparando.

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

C'è una soluzione molto più semplice e più pulito che ho usato per risolvere questo problema di quello che è già stato proposto:

utilizzando jQuery, è necessario utilizzare $(window).load invece di $(document).ready per la vostra situazione particolare. Per risolvere il problema, cambiare questo:

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

A tal:

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

Perché fa questo lavoro? Perché window.onload si attiva dopo aver caricato tutte le immagini di riferimento sulla pagina (vedere https://developer.mozilla.org/en/DOM/window.onload e .load() - jQuery API), che è il comportamento desiderato nella propria situazione. $(document).ready, meglio noto come "DOM Ready", si accenderà prima che le immagini vengano caricate. Questo è in genere il comportamento desiderato, ma nella tua situazione è troppo presto.

Answer 7

È possibile utilizzare una soluzione simile a rendere i video di YouTube reattivi. È necessario conoscere il rapporto tra larghezza e altezza e aggiungerlo come riempimento-fondo al div ciclismo. Per i miei 1024X680 foto, ho usato 680/1024 = 66,4%

Nel tuo caso, credo

#slideshow{ padding-bottom:66.4%; } mostrerà l'immagine unshrunk. Non ho idea di quali siano i reali valori di altezza e larghezza con cui stai lavorando, quindi sostituisci il tuo. Ho dovuto usare questa soluzione quando la soluzione $ (window) .load si è dimostrata inefficace e inefficace, quindi ora li uso entrambi.

Questo è meglio di impostare le dimensioni dell'immagine, perché è scorrevoli in un ambiente fluido, reattivo.