I'm a newbie in hybrid mobile / html development , i'm developing an mobile app using JQuery Mobile, where i have lots of images on the screen.

i have different buckets of images for different resolutions like mdpi, xhdpi, xxhdpi etc.,.

In android based on the screen resolution the bucket is choose and the corresponding images is taken from it.

I wanted to have a similar feature for hybrid mobile app also, when i did my research all led me to 'css media queries' but none of them address the fact of loading the images before the page loads.

Can anyone please help me understand how to implement or if any one of you have done it can you please post any code snippets.

Thanks in advance.

Shreyas