CODEWITHSUNDEEP
androidjqueryjquery-mobilecordova
jquery404
jquery404

Reputation: 674

How to show Image in a Listview after completely download in jQuery Mobile?

I'm creating an app using Phonegap/jQuery Mobile. I have created a ListView in jQuery mobile. In that page I called an ajax which contains some image url. So I want to show those image and other parameters after all images download is complete.

"data":[
{
"id":"48",
"string_id":"Hello world",
"imgurl":"http://sample.com/hello.jpg"
}, 
{
"id":"58",
"string_id":"Hello world",
"imgurl":"http://sample.com/world.jpg"
}
]

Here is the list view code.

<ul data-role="listview"></ul>

Upvotes: 1

Views: 522

Answers (2)

Gajotres
Gajotres

Reputation: 57309

Working example: http://jsfiddle.net/zghz4/

HTML:

<ul data-role="listview" style="display: none;">

</ul>

Javascript:

$(document).on('pageinit', '#index', function(){ 
    var obj = jQuery.parseJSON('{"data":[{"id":"48","string_id":"Hello world","imgurl":"https://si0.twimg.com/profile_images/3629297899/da2519b27b5b82454d67a3ff42b8c109.png"}, {"id":"58","string_id":"Hello world","imgurl":"https://si0.twimg.com/profile_images/3629297899/da2519b27b5b82454d67a3ff42b8c109.png"}]}');
    $.each(obj.data, function(index, value) {
        $('[data-role="listview"]').append('<li><img src="' + value.imgurl + '"><h2>' + value.string_id + '</h2></a></li>');
    });
    $('[data-role="listview"] li img').load(function(){

        $('[data-role="listview"]').show().listview('refresh');
    });  
});

In this example listview is hidden from the start.

Json is converted to an object and each loop is going through it appending new content to listview.

After that function load is used to wait for images to be loaded successfully. When images are loaded callback function is triggered, listview is showed and its content is enhanced with .listview('refresh').

Upvotes: 2

Ashis Kumar
Ashis Kumar

Reputation: 6554

You can use the jquery lazy load plugin.

Check the plugin over here http://www.appelsiini.net/projects/lazyload

You can go through the codes and watch the demos listed.

Upvotes: 0

Related Questions