SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Display: none, but still loaded into cache

    Hi,

    I have some img which have the display: none rule applied to them. This hides the images, but they will still be loaded into cache, right? There are quite a few of them on a page, and this slows down the loading of the page. Is there something which I can do about that?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Why do you have them there if they are hidden? Is this for a mobile display? One option would be to serve them as background images instead just for desktops.

  3. #3
    SitePoint Member
    Join Date
    Oct 2008
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Why do you have them there if they are hidden? Is this for a mobile display? One option would be to serve them as background images instead just for desktops.
    Yes, exactly. The images are thumbnails for a gallery. I like the idea about the background images!

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    Yes, bg images are the easy way to go. But this is a big issue for mobile, and some clever people have written scripts that erve up different versions of an image for different devices, which is another option.

  5. #5
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm also interested in this topic. How to you solve this when I have link in the image? In desktop or tablet version all images and content will load, but I would like to take out some images/content from mobile version. Currently I hide (display: none) such images that are without links, but this is not an appropriate solution. So is there any solution how could I control what kind of content or images are loaded for certain devices (based on min-width)?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    You can set the images as background images on the links. So you can still serve the images as background images, which can then be turned off for certain devices.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    My image is located in div named arrow and I've managed to add image link with tag named top. The problem is that I couldn't make it to appear in center of page - don't know why?! I've tried to use "background-position: center center" to center it, but without success. Any ideas how to solve this?

    Code:
    #arrow { clear: both; float: left; margin-left: 0; width: 100%; display: block; text-align: center; margin-top: 10%; }
    
    #top { background-image: url(../images/down.png); display: block; height: 44px; width: 80px; display: block; overflow: hidden; text-indent: 100%; white-space: nowrap; background-position: center center; }

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,588
    Mentioned
    411 Post(s)
    Tagged
    6 Thread(s)
    I would be good to know what kind of element #top applies to. Post your HTML too. Ideally, post a live link, so we can see this in action.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2012
    Posts
    33
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I've solved this by giving "margin-left: 45%" and "margin-top: 10%" to the div tag "#top".... this way image link is almost in the middle of screen.


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
  •