Temat: pokazanie obrazka po całkowitym załadowaniu

witam.

Ładuję nazwę zdjęcia przez ajaxa. I gdy pobiorę jego nazwę podmieniam zawartość diva na nowe, pobrane zdjęcie. W czasie pracy ajaxa div w ktorym za ładowane są zdjęcia zostaje zamieniony divem informującym o tym, że skrypt pracuje (loader - gif). Chciałbym aby zamiana divow czyli:

$('#wait').addClass('disable');

$('#img').removeClass('disable');

i w rezultacie pokazanie zdjęcia nastąpiło dopiero gdy zdjęcie to zostanie załadowane w pełni, czyli żeby nie było widać jak się ładuje.

do zdjęcia można się odwołać tak:
#img img

ponieważ to jedyny <img ....> w divie #img

Będę bardzo wdzięczny za odpowiedz.

Temat: pokazanie obrazka po całkowitym załadowaniu

Użyj konstrukcji podobnej do tej:

{
$.ajax({
type: "POST",
url: "/ajax/rating.php",
data: "id=6&rating=2",

success: function(msg) {
$('#warstwa').html('Nowa zawartość').show(500);
}
});
}
Chodzi o funkcje success, Wykonaj pokazanie obrazka jak ajax zakończy pobieranie danych

Temat: pokazanie obrazka po całkowitym załadowaniu

tak, tak. Właśnie tak robię. Ajax pobiera mi nazwę zdjęcia a ja w diva wstawiam:

$('#img').html('<img src="http://doemna.pl/' + data.name + '" alt="" />');

w funkcji success. I wszystko działa, jednak chciałbym aby zdjęcie wyświetliło się dopiero całe załadowane. Na wolniejszym internecie przy większych zdjęciach widać jak zdjęcie się wczytuje po kawałku.

cała funkcja wygląda tak:

$.ajax({

        url: phpURL,

        type: 'POST',

       dataType: 'json',

        error: function(xhr, textStatus, errorThrown) {

            displayError(textStatus);

        },

        success: function(data, textStatus){

            name = data.name;

            $('#img').html('<img src="http://domain.com/' + data.name + '" alt="" />');

            $('#iup').text(data.up);

            $('#idown').text(data.down);

            $('#ipkt').text(data.up - data.down);

                $('#wait').addClass('disable');

                $('#img').removeClass('disable');

           

        }

    });

Piotr Burant edytował(a) ten post dnia 25.01.12 o godzinie 11:43

Temat: pokazanie obrazka po całkowitym załadowaniu

Piotr Burant:
tak, tak. Właśnie tak robię. Ajax pobiera mi nazwę zdjęcia a ja w diva wstawiam:

$('#img').html('<img src="http://doemna.pl/' + data.name + '" 	[/quote]> alt="" />');[quote]

w funkcji success. I wszystko działa, jednak chciałbym aby zdjęcie wyświetliło się dopiero całe załadowane. Na wolniejszym internecie przy większych zdjęciach widać jak zdjęcie się wczytuje po kawałku.

$('#img').on('load', 'img', function() {

	$(this).show();

});



$('#img').html('<img src="http://doemna.pl/' + data.name + '" alt="" style="display: none" />');

?

Temat: pokazanie obrazka po całkowitym załadowaniu

$.ajax({

        url: phpURL,

        type: 'POST',

       dataType: 'json',

        error: function(xhr, textStatus, errorThrown) {

            displayError(textStatus);

        },

        success: function(data, textStatus){

            name = data.name;



            $('#img').on('load', 'img', function() {

                $('#wait').addClass('disable');

                $(this).removeClass('disable');



            });



            $('#img').html('<img src="http://domain.com/' + data.name + '" alt="" />');

            $('#iup').text(data.up);

            $('#idown').text(data.down);

            $('#ipkt').text(data.up - data.down);



        }

    });

nie dziala

Temat: pokazanie obrazka po całkowitym załadowaniu

Ja bym to zrobił trochę inaczej.

$.ajax({

        url: phpURL,

        type: 'POST',

       dataType: 'json',

        error: function(xhr, textStatus, errorThrown) {

            displayError(textStatus);

        },

        success: function(data, textStatus){



            $('#img').append($('<img />').attr('src', 'http://domain.com/' + data.name).load(function()

            {

                    alert('jest');

            }));

        }

    });

Ale jest to rozwiązanie nieprzetestowane, pisane tutaj w edytorze GL :)Mariusz Witek edytował(a) ten post dnia 25.01.12 o godzinie 14:50

Temat: pokazanie obrazka po całkowitym załadowaniu

Piotr Burant:

$.ajax({

        url: phpURL,

        type: 'POST',

       dataType: 'json',

        error: function(xhr, textStatus, errorThrown) {

            displayError(textStatus);

        },

        success: function(data, textStatus){

            name = data.name;



            $('#img').on('load', 'img', function() {

                $('#wait').addClass('disable');

                $(this).removeClass('disable');



            });



            $('#img').html('<img src="http://domain.com/' + 	[/quote]> data.name + '" alt="" />');[quote]            $('#iup').text(data.up);

            $('#idown').text(data.down);

            $('#ipkt').text(data.up - data.down);



        }

    });

nie dziala

no

1) zmieniłeś kod
2) nie napisałeś wersji jq
3) nie podałeś choćby błędu z firebuga

no ale próbowałem pomóc ;)

Temat: pokazanie obrazka po całkowitym załadowaniu

Mariusz Witek:
Ja bym to zrobił trochę inaczej.

$.ajax({

        url: phpURL,

        type: 'POST',

       dataType: 'json',

        error: function(xhr, textStatus, errorThrown) {

            displayError(textStatus);

        },

        success: function(data, textStatus){



            $('#img').append($('<img />').attr('src', 'http://domain.com/' + data.name).load(function()

            {

                    alert('jest');

            }));

        }

    });

Ale jest to rozwiązanie nieprzetestowane, pisane tutaj w edytorze GL :)

Działa dokładnie tak jak chciałem. Dziękuję Ci bardzo!

Kamil Brenk
Ja bym to zrobił trochę inaczej.

>no
>
>1) zmieniłeś kod
>2) nie napisałeś wersji jq
>3) nie podałeś choćby błędu z firebuga
>
>no ale próbowałem pomóc ;)

Również dziękuję za pomoc.
1) Zgadza się
2) query-1.7
3) Nie sprawdzałem w firebugu, w konsoli nic nie wyskoczyło