SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    A question about image loading

    Here's what I am wondering...Let's say that you have some html like:

    <img id="piglet" src="a.jpg" height="100" width="100">
    <img id="pigletBig" src="a.jpg" height="200" width="200">


    then you have different css set for smaller and larger monitors.

    In the larger monitor css you set opacity to 0 for #piglet - and do the opposite in the smaller one - set #pigletBig to 0

    (This way the larger version will show up when site is viewed on a larger screen, and the smaller one when viewed on a smaller screen.)

    Now, here's the question: will a browser load that same picture 2x (a.jpg) - making the page load slower (or, is it "smart" enough to see that it's the same picture)?

    Also, if anyone has a more elegant (or obvious) way to do this that would be greatly appreciated.

    Thanks

  2. #2
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi commanderpants (great name),

    Welcome to the forums!

    You might want to look into responsive design.
    Using this technique, you can use CSS3 media queries to detect the size of a user's viewport, then load different style sheets accordingly.
    Here's a good tutorial with examples: http://webdesignerwall.com/tutorials...-media-queries

    To relate that to your question: you could either load just the one image and have it scale with the viewport width, or you could define a div and set it's background-image property according to viewport width.

    If this sounds like something which might work for you, then let me know and I can make a simple demo.

    Edit: BTW, to answer your original question: the browser will load both images.

  3. #3
    Mouse catcher silver trophy Stevie D's Avatar
    Join Date
    Mar 2006
    Location
    Yorkshire, UK
    Posts
    5,892
    Mentioned
    123 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by commanderpants View Post
    Here's what I am wondering...Let's say that you have some html like:

    <img id="piglet" src="a.jpg" height="100" width="100">
    <img id="pigletBig" src="a.jpg" height="200" width="200">


    then you have different css set for smaller and larger monitors.

    In the larger monitor css you set opacity to 0 for #piglet - and do the opposite in the smaller one - set #pigletBig to 0

    (This way the larger version will show up when site is viewed on a larger screen, and the smaller one when viewed on a smaller screen.)

    Now, here's the question: will a browser load that same picture 2x (a.jpg) - making the page load slower (or, is it "smart" enough to see that it's the same picture)?

    Also, if anyone has a more elegant (or obvious) way to do this that would be greatly appreciated.
    Browsers will recognise that it is the same image and only load it once. (That is the same principle behind stylesheets – browsers temporarily cache the image or CSS so that they don't need to keep downloading it on every new page you visit. That's why the first page often takes longer to load then any subsequent pages).

    You might find it easier to use visibility:hidden; than opacity – it's a novel idea but I've never heard of it being used like that before!

    But an easier way would probably be to just have one image there, then not set dimensions in the HTML but do it in the CSS, something like
    Code CSS:
    img#piglet {height:100px; width:100px;} /* this line for small screens */
    img#piglet {height:200px; width:200px;} /* this line for large screens */

  4. #4
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Quote Originally Posted by Stevie D View Post
    Browsers will recognise that it is the same image and only load it once.
    Oops! I mistook the image ids as being the file names
    Of course the image will only get loaded once. Thanks Stevie.

  5. #5
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks so much both of you. This was REALLY helpful. I was not really clear in my original question, but I am using mediaqueries to call up the different css for different screens (#piglet is set to opacity:0 for the larger screen CSS - over 1400px wide). It is just the site I am working on uses animations that work as a unit on the page, and I fear that responsive design would make it not work properly at some sizes (I cannot figure out a way to call different jQuery scripts for different size monitors - is there a way?). Perhaps I am wrong?

    Here's the link to one of the pages I am doing:
    http://pantsateria.com/linda/acrobats%28mediaQuery%29.html

    I have absolutely positioned images to keep them together (and just where I want them).

    The bubbles and the acrobats are separate images on this page (to keep the bubbles from spinning while the acrobats get dizzy). My fear is that using responsive design will cause the acrobats to go outside the border of their bubbles at different points in the animation.

    Any thoughts?

    Again, thanks for being out there.

    CP

  6. #6
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hi,

    Quote Originally Posted by commanderpants View Post
    I cannot figure out a way to call different jQuery scripts for different size monitors - is there a way?
    Just a little terminology up front:
    The monitor size is, as you would imagine, the size of your monitor.
    The viewport size is the size of the user's browser window.

    You can get the monitor size (or in other words its resolution) in JavaScript by using screen.height and screen.width.
    There isn't too much point in doing this though, as it is quite feasible that a user is viewing your site, but doesn't have their browser window maximized.
    This is where the viewport comes in.

    It is possible to get the viewport dimensions using plain JavaScript, but there are a few browser compatibility issues that it is better to let jQuery iron out for you.

    Here's a script that does just that and displays the result on the page. It also responds to the window being resized.

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Get viewport dimensions</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <p>Current viewport height is: <span id="vp-height"></span> px</p>
        <p>Current viewport width is: <span id="vp-width"></span> px</p>
        
        <script>
          function getBrowserDimensions(){
            var viewportWidth = $(window).width();
            var viewportHeight = $(window).height();
            $("#vp-width").text(viewportWidth);
            $("#vp-height").text(viewportHeight);
          }
          
          $(document).ready(function() {
            getBrowserDimensions();
            
            $(window).resize(function() {
              getBrowserDimensions();
            });	
          });
        </script>
      </body>
    </html>
    Does this help you at all?

  7. #7
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Definitely pretty cool, but what I am actually looking for a way for my html (?) code to detect the viewport size being used and use a different .js file for different size monitors (like a media-query does for css). My code involves a lot of movement (e.g. .animate({left:"215px", top:"100px", height:"50px", width:"27px"},3700); ), and for different viewport sizes I was hoping to use different movements (at the moment I am using the workaround I mentioned when I opened this thread).

    If you check this link you will see what I mean: http://pantsateria.com/linda/acrobats%28mediaQuery%29.html. Everything needs to be exact to work properly (that's where I thought that some sort of js "media-query" might be helpful.

    Thanks

  8. #8
    Gre aus'm Pott gold trophysilver trophybronze trophy
    Pullo's Avatar
    Join Date
    Jun 2007
    Location
    Germany
    Posts
    6,043
    Mentioned
    219 Post(s)
    Tagged
    12 Thread(s)
    Hey,

    Quote Originally Posted by commanderpants View Post
    Definitely pretty cool, but what I am actually looking for a way for my html (?) code to detect the viewport size being used and use a different .js file for different size monitors (like a media-query does for css).
    That's effectively what I was showing you with the last example.
    You need to attach an event handler to the onload and onresize events, which would check the viewport size and call a function accordingly.
    Here's a different example, where the same function is called with different arguments. You could just as easily adapt it to call different functions instead (do whatever you want, really).

    HTML Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
      <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title>Get viewport dimensions 2</title>
        <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
      </head>
      
      <body>
        <script>
          function changeBackgroundColour(col){
            $('body').css("background", col);
          }
        
          function checkBrowserDimensions(){
            var viewportWidth = $(window).width();
            if (viewportWidth > 1000){
              changeBackgroundColour("red");
            } else if (viewportWidth < 1000 && viewportWidth > 500){
              changeBackgroundColour("yellow");
            } else {
              changeBackgroundColour("green");
            }
          }
          
          $(document).ready(function() {
            checkBrowserDimensions();
            
            $(window).resize(function() {
              checkBrowserDimensions();
            });  
          });
        </script>
      </body>
    </html>
    Saying that, there might be another way to do what you want.
    Check out this thread where pretty much the same thing is discussed: http://www.sitepoint.com/forums/show...-Media-Queries

  9. #9
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Now I see. Thank you so much. This will help.

  10. #10
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,868
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    One thing to note is that browsers are not designed to resize images and so depending on what is in the image it may not display correctly if you try to display it at anything other than its actual real size.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  11. #11
    SitePoint Member
    Join Date
    Jan 2013
    Posts
    5
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the heads up.


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
  •