May 20, 2013
event after json completes loading
Simmi Simmi’s Question:
i am loading data using json in my image slider i want to perform some action once json completes loading images .
$.ajax({
type: "GET",
url: "photos.xml",
dataType: "xml",
success: function( xml ) {
$(xml).find('item').each(function() {
var path = $(this).attr('path');
var width = $(this).attr('width');
var height = $(this).attr('height');
var id = $(this).attr('id');
var alt = $(this).attr('alt');
var longdesc = $(this).find('longdesc').text();
var description = $(this).find('desc').text();
$('#myImageFlow').prepend('<img src="'+path+'" id='+id+' height="'+height+'" width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
imgArr[i] = description;
i = i + 1;
});
}
});
How to do this?
You can use .promise() function to do such things.
$(list).promise().done(function() {
console.log("image completed loading");
});
Use as:
$.ajax({
type: "GET",
url: "photos.xml",
dataType: "xml",
success: function(xml) {
var xmlList = $(xml).find('item');
xmlList.each(function(){
var path = $(this).attr('path');
var width = $(this).attr('width');
var height = $(this).attr('height');
var id = $(this).attr('id');
var alt = $(this).attr('alt');
var longdesc = $(this).find('longdesc').text();
var description = $(this).find('desc').text();
$('#myImageFlow').prepend('<img src="'+path+'" id='+id+' height="'+height+'" width="'+ width+'" longdesc="'+longdesc+'" alt="'+alt+'"/>');
imgArr[i] = description;
i = i+1;
});
$(xmlList).promise().done(function() {
console.log("image completed loading");
});
}
});
