Czy zdarzenie "gotowe" zostało wywołane, gdy element jQuery jest tworzony w locie?

Próbuję zaimplementować coś w rodzaju karuzeli zdjęć w jQuery. Ta karuzela może być wypełniona obrazami przy użyciu tablicy źródeł obrazu (tworzę prośbę ajaxową, która zwraca json z tymi danymi) i po wypełnieniu możesz wywołać kilka metod, previous() i next(), aby przenieść odpowiednio do karuzeli w przód iw tył.Czy zdarzenie "gotowe" zostało wywołane, gdy element jQuery jest tworzony w locie?

Chodzi o to, że funkcjonalność jest już wdrożona i działa, ale nie mogę rozwiązać problemu z procesem zmiany rozmiaru. Aby uniknąć sytuacji, w której obrazy przekraczają granice kontenera, w razie potrzeby dysponuję metodą do tworzenia i zmiany rozmiaru obrazów.

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

Podczas testowania tej funkcji okazało się, że czasami obrazy nie są przesuwane zgodnie z oczekiwaniami. Użyłem firebug console.log() do zalogowania obrazu [0] .width tuż poniżej tworzenia elementu jQuery, dowiadując się, że czasami wartość wynosi 0.

Nie jestem ekspertem od jQuery, ale przypuszczam, że że gdy tak się stanie (wartość wynosi 0), to znaczy, że element nie jest gotowy.

Jak mogę zapewnić, że element jest już załadowany, gdy pytam o jego szerokość i wysokość?

Czy coś takiego jest możliwe?

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

Dziękuję za pomoc!

Źródło

2010-06-22 Roberto Adarve

możliwy duplikat [zdarzenia jQuery dla załadowanych obrazów] (http://stackoverflow.com/questions/910727/jquery-event-for-images-loaded) – spender

@spender - Proszę zobaczyć moje komentarze do odpowiedzi Sarfraza ... this isn ' t to samo pytanie, i to nie jest odpowiednia odpowiedź, nie powinno się tego zamykać jako duplikatu ... ponieważ, w ell, to jest inne pytanie. –

@Nick, mogę tylko myśleć, że nie zauważyłeś, że Sarfaz używa zdarzenia obciążenia okna, ale odpowiedź w połączonym pytaniu używa zdarzenia ładowania obrazu. Zamieszczę odpowiedź, aby zademonstrować, ale to naprawdę nie powinno być konieczne. – spender

chcesz użyć zdarzenia load w tym przypadku, podobnie jak to:

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

Ostatni nieco wyzwala zdarzenie load w przypadku, gdy nie dostał już wywołało ... co nie zdarza się w niektóre przeglądarki podczas ładowania obrazu z pamięci podręcznej, używając .one() do jednego uruchomienia tylko raz i do sprawdzenia, czy jest załadowany, i .complete.

Źródło

2010-06-22 21:39:19

Dziękuję bardzo Nick! Działa to dobrze !!! –

Nie ma metody "one", powinieneś ją zmienić na 'on' – kirugan

@kirugan Tak, jest: http://api.jquery.com/one/ To nie jest literówka. –

Jest kompatybilne żadne platformy sposoby sprawdzenia, czy obiekt DOM jest „gotowy”, patrz https://developer.mozilla.org/en/DOM_Events dla gekona konkretne zdarzenia

Źródło

2010-06-22 21:41:26 azatoth

Jak na odpowiedź udzieloną here, zapukałem razem demo pracy:

<!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>

Źródło

2010-06-22 22:52:59 spender

Kilka rzeczy do naprawienia tutaj, to nie obsługuje pamięci podręcznej (która nie uruchamia 'load' we wszystkich przeglądarkach, zobacz moją odpowiedź), powinno to być po prostu' img.appendTo ("body"), 'i powinieneś załączyć 'load' handler przed ustawieniem źródła, jeśli robisz to w ten sposób, w przeciwnym razie na pewno nie uruchomi twojej obsługi ładunku z pamięci podręcznej w * dowolnej * przeglądarce, zdarzenie może wystrzelić zanim pojawi się dla niego obsługa. –

Naprawiono zlecenie ... Reimplementowałem twoją odpowiedź na resztę! ;) – spender

Czy zdarzenie "gotowe" zostało wywołane, gdy element jQuery jest tworzony w locie?

Odpowiedz

Powiązane problemy