Jump to content
Sign in to follow this  
PaulV

How to make images not load on a mobile site?

Recommended Posts

I know i can use display:none, but the page has a lot of pics. The mobile page has less content and few pics. To load quicker and waste less bandwith i want to pics not to load on a mobile phone.How can I do that?

Share this post


Link to post
Share on other sites

How will you detect it is a mobile device? The best I can think of at the moment is to have a user display option that can be saved in a cookie.

Share this post


Link to post
Share on other sites

FYI loading and displaying are not the same thing. When you set display:none; the image will still consume the same bandwith because it must be physically called in browser memory even though it may not appear. For proof of concept the response time between display:block is significantly quicker than creating the image.

 

Now to actually answer your question you can use one of a few options.

 

My personal favorite trick is simply using a background image

@media only screen and (max-device-width: 480px) {    div {        background-image: url('myImageUrl.png');        height: 200px;        width: 400px;    }}<div></div>

However it can be a bit difficult to control the image ideally depending on your markup and events.

 

 

Another way (slighly more dificult however much more dynamic) is to use a javascript event to create an image through the DOM. Sort of like creating a mobile display template.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...