CODEWITHSUNDEEP
javascriptjqueryhtmlimage
pomber
pomber

Reputation: 23980

HTML images conditional downloading

I have something like this:

<div>
    <img src="bigimage_1.jpg" />
    <img src="bigimage_2.jpg" />
    <img src="bigimage_3.jpg" />
    ...
    <img src="bigimage_n.jpg" />
</div>

The div should only be shown if the width of the viewport is greater than 300px.

Since the images are very large, I dont want them to be downloaded when the width is lower than 300px. But when the width is greater than 300px I need to start downloading them as soon as possible.

Also, this should work on a lot of browsers on a lot of devices so I want to make it as robust as possible.

I was thinking in using https://github.com/sebarmeli/JAIL and call the jail function on $(document).ready, but I don't know if there is a better solution.
Any recommendations?

Upvotes: 2

Views: 766

Answers (3)

kinakuta
kinakuta

Reputation: 9037

I recommend taking a look at Scott Jehl's picturefill solution. It takes a somewhat similar approach to JAIL in terms of implementing a no-js solution using the noscript tag to provide the fallback image, but it avoids the initial http request made for the placeholder .gif.

Upvotes: 2

Mindwin Remember Monica
Mindwin Remember Monica

Reputation: 1539

Put a $(document).ready function, test the viewport (or the render area available for the image, accounting for body and other element's margin, paddings, etc) width with a conditional statement, and call the jail function if it passes.

You could place a width-greedy-zero height (with css) empty element where the images are supposed to be loaded, and test how much width it can get by selecting him via jquery. If its width is greater than 300, call the JAIL.

Upvotes: 0

Jeremy
Jeremy

Reputation: 113

You can try use CSS @media (min-width: 300px) { … }

Upvotes: 0

Related Questions