Witam.

Chcę zrobić skrypt, który będzie ładował mi do okna "columns_window" zdjęcia po przewinięciu strony w dół. Narazie udało mi się napisać sama funkcje, która wykrywa odpowiednio scroll i ładuje ajax'a. Chciałbym jednak aby podczas tego ładowania pojawiał się div z napisem "wczytuje", i znikał jak dokona wczytania zdjęć. Obecnie pojawia się taki napis, ale źle to wygląda i bez animacji... Chciałbym aby był to jakiś fade albo wysuwał się z dołu i znikał przynajmiej po opóźnieniu 500. Gryze się z tym tematem i metodą prób i błędów nadal nie mogę tego osiągnąć.

poniżej działający kod:

[HTML] pobierz, plaintext 
<div id="content">
	<div id="content_column_gallery">
		<div class="columns_window">
 
                          tutaj mają pojawiać się zdjęcia 
 
		<div id="loadmoreajaxloader" style="display:none;"><center><img src="ajax-loader.gif" />wczytuje</center></div>
		</div>
		</div>
 
	</div>
 
</div>
[HTML] pobierz, plaintext 

a tutaj ajax:

[HTML] pobierz, plaintext 
<script type="text/javascript">
 
$('#content_column_gallery').scroll(function()
{ 
    var x = document.getElementsByClassName("columns_window")[0];
    if($('#content_column_gallery').scrollTop() + $('#content_column_gallery').height() > x.offsetHeight) 
    {
		$('div#loadmoreajaxloader').show();
 
        $.ajax({
        url: "s/ajax.php",
        success: function(html)
        {
            if(html)
            {
                $(".columns_window").append(html);
                $('div#loadmoreajaxloader').hide();
            }else
            {
                $('div#loadmoreajaxloader').html('<center>Brak więcej zdjęć.</center>');
            }
        }
        });
    }
});
 
</script>
[HTML] pobierz, plaintext 

Wdzięczny byłbym również za podpowiedź jak dodać animacje "jquery masonry" dla wczytanych zdjęć, aby ładnie pojawiały się na ekranie.

to chyba nie takie proste...przynajmniej nie dla mnie.

znalazłem taki skrypt:

[HTML] pobierz, plaintext 
var fadeEffect=function(){
    return{
        init:function(id, flag, target){
            this.elem = document.getElementById(id);
            clearInterval(this.elem.si);
            this.target = target ? target : flag ? 100 : 0;
            this.flag = flag || -1;
            this.alpha = this.elem.style.opacity ? parseFloat(this.elem.style.opacity) * 100 : 0;
            this.elem.si = setInterval(function(){fadeEffect.tween()}, 20);
        },
        tween:function(){
            if(this.alpha == this.target){
                clearInterval(this.elem.si);
            }else{
                var value = Math.round(this.alpha + ((this.target - this.alpha) * .05)) + (1 * this.flag);
                this.elem.style.opacity = value / 100;
                this.elem.style.filter = 'alpha(opacity=' + value + ')';
                this.alpha = value
            }
        }
    }
}();
[HTML] pobierz, plaintext 

tutaj demo : klik
a tutaj tutek do tej animacji: klik

jak teraz odwołać się do tej funkcji aby "$('div#loadmoreajaxloader').show();" wykonywało się w powyższej funkcji ?
na stronie z tutkiem jest podane, że : fadeEffect.init('fade', 1, 50), wywoła to funkcje po kliknięciu w button'a. A ja chcę aby się to wykonało podczas ładowania ajaxa z opóźnieniem np sekundy.
tak samo chcę zrobić dla .hide().

Prosiłbym o gotową linijkę kodu naprawdę sam nic nie wymyśle.... będę bardzo wdzięczny !

jQuery ma taka funkcjonalonsc wbudowana, zamiast hide() i show() dajesz http://api.jquery.com/fadeIn/ i .fadeOut(). Opoznienie mozesz wykonac poprzez .delay() (tez jQuery). Wybacz, nie chce mi sie linkowac, ale skoro masz metody podane to juz nie powinno byc problemem

ok dzięki : ) pomogło wg Twoich wskazań.

$('div#loadmoreajaxloader').fadeIn('slow').delay(800);

a mógłbyś jeszcze podpowiedzieć jak wykonać jakąś sensowną animacje pojawianych się zdjęć ?
myślałem o "jquery masonry" ale nie wiem jak do tego podejść....

Nie ma sensu wykonywac takiej animacji, po pierwsze dlatego, ze one najpierw musza sie wczytac, a z tego co widze u Ciebie, to pobierasz kod html z linkami, po prostu dodaj animation, a wewnatrz tego height + opacity zmien.

ogólnie to dążę do takiego efektu: klik
chciałbym aby wczytane zdjęcia pojawiały się właśnie w ten sposób.
W tym demo (link), skrypt wykonany jest tak, że ładuje zdjęcia z innych plików html. Ja chcę zrobić dokładnie to samo co na tej stronie, tylko chciałbym aby zdjęcia ładowane były poprzez ajax - zachowując jednocześnie tą samą animacje...

ok, poradziłem sobie : )

$(function(){

$('.columns_window').masonry({
itemSelector: '.content_column_gallery_item',
columnWidth: 100
});

});

Dzięki jeszcze raz za pomoc : ) !

Aby uzyskac taki efekt musisz jeszcze troche zrobic. Jak na razie masz pobrany kod HTML, ale kiedy juz to zaladujesz do DOM, dopiero zacznie sie wczytywanie zdjec... A dopiero kiedy zdjecia sie wczytaja zostana one pokazane na stronie. Ty musisz zrobic tak, aby zawartosc zostala dodana do DOM, gdy juz bedzie calosc pobrane (nie tylko linki do zdjec, ale takze zdjecia).
Najlatwiej bedzie pobrac same linki (+ ewentualnie inna zawartosc, podpisy, itd.) w formacie JSON. Te linki powinienes uzyc do utworzenia nowych obiektow (a dopiero, gdy zawartosc tych obiektow zostanie pobrana przez UA dodac na strone).

rozumiem o co Ci chodzi, ale o ile w php nie ma u mnie z niczym problemów, tak w js/ajax jestem zupełnie zielony... Znasz może jakieś ciekawe gotowe rozwiązania ? nie muszą być w postaci tej przedstawionej wyżej(czyli animacji masonry). Wystarczy mi, aby zdjęcia wczytywały się tak jak mówisz. Fakt, myślalem już o tym, ze lepiej byłoby załadować najpierw samo okno i ewentualnie treść, a dopiero później ładować zdjęcia ale wiem, że zmarnuje więcej czasu na próbie tego zrozumienia niż na przerobienie gotowca...

http://lmgtfy.com/?q=image+preloader+jquery

BTW. preloader moze tylko wczytac zdjecia, a wyswietlenie moze nastapic za pomoca tej animacji, ktora chcesz uzyskac, wystarczy odpowiednio przystosowac skrypt, w jQuery zazwyczaj wystarczy dac odpowiednia funkcje callback.