C'è un evento "pronto" attivato quando un elemento jQuery viene creato al volo?

Sto cercando di implementare qualcosa come un carosello di foto in jQuery. Questo carosello potrebbe essere riempito di immagini usando una serie di sorgenti di immagini (faccio una richiesta di ajax che restituisce un json con questi dati) e, una volta che è pieno, puoi chiamare un paio di metodi, previous() e next() per spostare il carosello avanti e indietro rispettivamente.C'è un evento "pronto" attivato quando un elemento jQuery viene creato al volo?

Il problema è che questa funzionalità è già implementata e funzionante, ma non riesco a risolvere un problema sul ridimensionamento del processo. Per evitare che le immagini superino i limiti del contenitore, ho un metodo per creare e ridimensionare le immagini, se necessario.

this.getImageResized = function(imageSrc) { 

    var image = $('<img />', {src : imageSrc}); 

    // Container ratio 
    var ratio = this.itemMaxWidth/this.itemMaxHeight; 

    // Target image ratio is WIDER than container ratio 
    if((image[0].width/image[0].height) > ratio) { 
     if(image[0].width > this.itemMaxWidth) { 
      image.css('width', this.itemMaxWidth + 'px'); 
      image.css('height', 'auto'); 
     } 
    // HIGHER 
    } else { 
     if(image[0].height > this.itemMaxHeight) { 
      image.css('width', 'auto'); 
      image.css('height', this.itemMaxHeight + 'px'); 
     } 
    } 

    // Embeds image into a wrapper with item's width and height 
    var wrapper = $('<span style="display : block; float : left; width : ' + this.itemMaxWidth + 'px; height : ' + this.itemMaxHeight + 'px"></span>'); 

    image.appendTo(wrapper); 

    return wrapper; 
};

Testing questa funzione, ho scoperto che a volte, le immagini non vengono ridimensionate come previsto. Ho usato firebug console.log() per registrare l'immagine [0] .width appena sotto la creazione dell'elemento jQuery, scoprendo che a volte il valore è 0.

Non sono un esperto di jQuery, ma suppongo che quando ciò accade (il valore è 0) è perché l'elemento non è pronto.

Come posso assicurare che l'elemento sia già caricato quando chiedo i valori di larghezza e altezza?

È possibile qualcosa del genere?

var image = $('<img />', {src : imageSrc}).ready(function() { 
    // But image[0].width it's not available here! 
});

Grazie per il vostro aiuto!

fonte

2010-06-22 Roberto Adarve

possibile duplicato di [evento jQuery per immagini caricate] (http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) – spender

@spender - Si prega di vedere i miei commenti alla risposta di Sarfraz ... questo non è t la stessa domanda, e anche questa non è la risposta appropriata, questo non dovrebbe essere chiuso come un duplicato ... perché, w ell, è una domanda diversa. –

@Nick, posso solo pensare che non hai notato che Sarfaz sta usando l'evento caricamento finestra, tuttavia la risposta nella domanda collegata utilizza l'evento caricamento immagine. Pubblicherò una risposta per dimostrarlo, ma in realtà non dovrebbe essere necessario. – spender

si desidera utilizzare l'evento load in questo caso, in questo modo:

var image = $('<img />', {src : imageSrc}).one('load', function() { 
    // use this.width, etc 
}).each(function() { 
    if(this.complete) $(this).load(); 
});

L'ultimo bit attiva l'evento load nel caso in cui non ha ottenuto già innescato ... cosa che non accade in alcuni browser quando si carica l'immagine dalla cache, utilizzando .one() a un incendio solo una volta e .complete per verificare se è stato caricato.

fonte

2010-06-22 21:39:19

Grazie mille Nick! Funziona bene !!! –

Non esiste un metodo 'one', dovresti cambiarlo in' on' – kirugan

@kirugan Sì, c'è: http://api.jquery.com/one/ Non è un refuso. –

Non c'è nessuna piattaforma modi compatibili per vedere se un oggetto DOM è "pronto", vedere https://developer.mozilla.org/en/DOM_Events per Gecko eventi specifici

fonte

2010-06-22 21:41:26 azatoth

Come per la risposta fornita here, bussai insieme una demo di lavoro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script> 
    <script type="text/javascript"> 
    //<![CDATA[ 
    $(window).load(function(){ 
    //window load already fired 
    setTimeout(function(){ 
     var img=$('<img />'); 
     img.appendTo($("body")); 
     img.load(function(){alert("img is "+$(this).width()+"px wide.")}); 
    },5000) //5 secs delay. definitely adding "dinamically" 
     img.attr("src","http://sstatic.net/so/img/sprites.png"); 
    }); 
    //]]> 
    </script> 
</head> 
<body> 

</body> 
</html>

fonte

2010-06-22 22:52:59 spender

Alcune cose da sistemare qui, questo non gestisce il caso memorizzato nella cache (che non spara 'load' in tutti i browser, vedi la mia risposta), dovrebbe essere semplicemente' img.appendTo ("body"), 'e dovresti collegare il gestore 'load' prima di impostare l'origine se lo fai in questo modo, altrimenti non licenzierà il gestore del carico dalla cache in * any * browser, l'evento potrebbe sparare prima che ci sia un gestore per esso. –

Sistemato l'ordine ... Mi piacerebbe reimplementare la tua risposta per il resto! ;) – spender

C'è un evento "pronto" attivato quando un elemento jQuery viene creato al volo?

risposta

Problemi correlati