Advanced Search

Results 1 to 5 of 5

Thread: How to make images not load on a mobile site?

  1. #1
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default How to make images not load on a mobile site?

    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?
    Thx for the replu, but i guess i was not clear.
    I make one page with responsive design. I have the same html, but to CSS, one for big and one for small screens.
    The CSS for small screens makes the page look different, much simpler and easy to read on a mobile screen.
    I hide most pics and other superfluous content with display:none.
    But it seems that still the images will needlessly load, therefore slowing the site down.
    How to stop content from loading if i don't need it?
    Last edited by PaulV; 11-29-2013 at 05:04 AM. Reason: the question was not clear

  2. #2
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,672
    Thanks
    43
    Thanked 3,125 Times in 3,091 Posts
    Blog Entries
    12

    Default

    I'm not exactly sure what you're asking. It sounds like you might have two separate pages. Or that you want one page to appear differently depending upon whether it's being viewed on a mobile device or not. Generally javascript and/or media queries (a type of css) are used for these sorts of things. Javascript can device sniff (read the navigator.userAgent string looking for keywords like 'iphone' and 'android', etc.) and do different things based upon that. Media queries can structure different css dependent upon screen size, so a certain class of images and/or other elements (like ones with text and/or images in them) could be display none at smaller screen sizes.

    Display none images generally will not load unless made visible. If that's good enough, media queries would be the way to go. If you need it to be more certain, javascript could actually remove some or all images from the DOM before they load. Or even more foolproof (from the point of view of preventing them from even beginning to load), not insert them unless a non-mobile device is detected.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  3. #3
    Join Date
    Mar 2006
    Location
    Illinois, USA
    Posts
    12,154
    Thanks
    260
    Thanked 690 Times in 678 Posts

    Default

    Making them "not load" is harder than making them load. That is, if you want to use some kind of "if" statement, it would probably be easier to do this on the computer than on the phone. So you can check roughly if (!mobile_device) {...
    But as John suggested, having two pages (or stylesheets) would be a better approach. Using Javascript to detect a mobile browser isn't entirely reliable and having images conditionally display could cause other complications on an otherwise unproblematic website.
    Daniel - Freelance Web Design | <?php?> | <html>| espa˝ol | Deutsch | italiano | portuguŕs | catalÓ | un peu de franšais | some knowledge of several other languages: I can sometimes help translate here on DD | Linguistics Forum

  4. #4
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,877
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    I was reading an interesting article the other day on media queries: http://zomigi.com/blog/essential-con...media-queries/ and part of the discussion covered images downloaded (or not) inside of media queries.

    The whole article is very interesting, and you will probably pick up a load of other useful ideas. Anyway, a link within that page goes to a website that shows test cases for methods to stop images from being downloaded on mobile devices. The full article is here: http://timkadlec.com/2012/04/media-q...o_display_none

    The concluding part of the post recommends 2 methods for avoiding image downloads on mobile;

    1 - Set an image as a background on a div, and then instead of hiding that div, you hide the div's parent element
    Code:
    <div id="test3">
        <div></div>
    </div>
    
    #test3 div {
        background-image:url('images/test3.png');
        width:200px;
        height:75px;
    }
    @media all and (max-width: 600px) {
        #test3 {
            display:none;
        }
    }
    2 - Use stacked media queries to serve all images (set as backgrounds on divs) to different sized screens
    Code:
    <div id="test5"></div>
    
    @media all and (min-width: 601px) {
        #test5 {
            background-image:url('images/test5-desktop.png');
            width:200px;
            height:75px;
        }
    }
    @media all and (max-width: 600px) {
        #test5 {
            background-image:url('images/test5-mobile.png');
            width:200px;
            height:75px;
        }
    }
    Caveat on method 2
    ...if you use this method, you’ll need to consider alternate options for Internet Explorer 8 and under. Those versions of the browser don’t support media queries, so no image will be applied. Of course, this is simple enough to fix with conditional comments and an IE specific stylesheet.
    Last edited by Beverleyh; 11-29-2013 at 12:37 PM.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  5. #5
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,877
    Thanks
    16
    Thanked 288 Times in 287 Posts
    Blog Entries
    4

    Default

    Quote Originally Posted by jscheuer1 View Post
    Display none images generally will not load unless made visible. If that's good enough, media queries would be the way to go.
    I just wanted to draw attention to the first 2 test results at http://timkadlec.com/2012/04/media-q...o_display_none , which I think shows the 2 most common uses of display:none; - unfortunately these will still cause the images to download.

    It's only when media queries are used as part of the 2 recommended methods, that display:none; stops the download.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

Similar Threads

  1. found this site to make sprite images
    By ajfmrf in forum Graphics
    Replies: 7
    Last Post: 05-13-2013, 03:57 AM
  2. Replies: 1
    Last Post: 12-09-2012, 06:39 PM
  3. Mobile Site
    By nate51 in forum HTML
    Replies: 6
    Last Post: 09-16-2011, 09:27 AM
  4. Bookflip - Can I make it load images from a directory?
    By retroboutiques in forum Dynamic Drive scripts help
    Replies: 0
    Last Post: 07-08-2009, 11:48 PM
  5. Replies: 31
    Last Post: 11-19-2007, 03:40 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •