Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    preload large gallery/slider images in HTML

    I was wondering if there's a way though to kind of preload those images to make them appearing faster and smoother. Or maybe there's a way to preload all the other pages and images into the cache so that at least all the following pages after the first appear smooth and fast? Whatever helps to make the pages load faster and smoother.

    Any suggestions?

    Each image consists of a variety of images, all of them within one wide image (prepared in PSD) and the visitor can shift left and right to call for the respective image to appear in the center. Unfortunately sacrificing on the image quality or make them smaller is not an option here.

    I know there are posts here on preloading images ad stuff but I can't find any that work with the image embedded in the HTML code.

    Please have merci, I'm a CSS and Javascript novice, so the simpler the more likely I'll understand it. I'm afraid breaking up the images in single instances (make it a row of images instead of one whole image), place them in a floated div and change the respective Javascript code could be too challenging for me, right...? How else could I do that?

    Appreciated!

    Here's what I have (I guess it would be overkill to post all my HTML, Javascript and CSS here, I'll post some). The large images are placed within the HTML page and called via Javascript.
    http://raphaelzwyer.com/testRapha/portfolio_bmw.html

    Code:
    <div class="ShiftGroup">
            <div class="ShiftGroupC">
            <div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_anzic1.png" width="3348" height="372" alt="imagegallery1" /></div></div>
            <div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
            <div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>
    and then

    Code:
    gallery = document.getElementById('ShiftGalleryFour').style;

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,617 Times in 4,581 Posts
    Why do you think using 5 images in a single <div> would be any harder than putting them all into a single image???

    But, truthfully, the way you have it now it would require that 3 out of the 5 would have to be loaded as part of the page load, right? How else do you get the effect of the two "faded" images on either side of the center one? So you'd end up loading 60% of the total content at page load time. You won't gain a huge amount by using lazy load for the other 40%.

    Or are you anticipating having many more images in the future?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    27,554
    Thanks
    80
    Thanked 4,617 Times in 4,581 Posts
    Oh, I see! I hadn't clicked on your PORTFOLIO button before.

    Hmmm.. You seem to be doing preloading, already? When I then clicked on MS, the image appeared immediately.

    Maybe I don't understand what your real question is, then.

    Curiosity: Why do you have several pages instead of just one? I would think it would be easier to control the preloading if you made all the portfolio pages actually one page, using JS to dynamically change the content.

    But in any case, since what you have seems to work, what's the real question here?
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    rapha (09-25-2012)

  • #4
    New Coder
    Join Date
    Aug 2012
    Location
    Brooklyn, New York
    Posts
    11
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Why?

    Hey, Old Pedant,
    Thank you for your time and suggestions! Appreciate it!
    Maybe I need more basic knowledge in Javascript to qualify for posting here?

    "Maybe I don't understand what your real question is, then":
    I found a Javascript rule now which I use in the head for preloading. It still just doesn't load smoothly. It's kind of pixelated at first and takes about a second to load. It just doesn't look professional to me. Demanding, I know, but it's my portfolio so I want it to look professional. Am I too picky?

    "Why do you think using 5 images in a single <div> would be any harder than putting them all into a single image???"
    I don't know how I would reference the single images in CSS or Javascript to the div containing them. In my limited knowledge, f I were to reference them as background images in a CSS class or ID I would have to define a separate class/ID for each background image, no? Plus, as you point it out in your second post, I want to keep the faded images on both sides (they have a transparent white layer on top of them). I even used different linked Javascript files to account for pages that differ in terms of the amount of images in the gallery, I'm sure that's rather unprofessional.
    There might be more images coming, yes.

    "Why do you have several pages instead of just one":
    Same here. If you go to the overview page you'll see that each brand thumb is linked to its own page on which there are different images and different descriptions underneath the images.
    I'm not fluent with Javascript and content management systems and I'm a novice in CSS. I couldn't figure out how to do that.
    Limited skills...

  • #5
    Senior Coder
    Join Date
    Mar 2005
    Location
    Portsmouth UK
    Posts
    4,533
    Thanks
    3
    Thanked 512 Times in 499 Posts
    to prevent the initial pixilation start with a low resolution image
    and change the image and initialise the script after preload

    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" xml:lang="en" lang="en">
    
    <head>
      <title></title>
    <style type="text/css">
    /*<![CDATA[*/
    
    #tst {
      position:absolute;left:100px;top:100px;width:665px;height:400px;border:solid red 1px;
    }
    
    #tst IMG{
      position:absolute;
    }
    
    /*]]>*/
    </style></head>
    
    <body>
    <div id="tst">
     <img src="http://www.vicsjavascripts.org.uk/StdImages/Egypt5.jpg" />
    </div>
    <script  type="text/javascript">
    
    var obj=document.getElementById('tst').getElementsByTagName('IMG')[0];
    var img=new Image();
    img.src='http://raphaelzwyer.com/testRapha/images/gallery_bmw1.png';
    
    function Load(){
     if (img.width<100){
      setTimeout(function(){  Load(); },500);
     }
     else {
      obj.src=img.src;
      obj.style.width=img.width+'px';
      obj.style.height=img.height+'px';
      obj.style.left=-665+'px';
     }
    }
    
    Load();
    
    </script>
    </body>
    
    </html>
    Vic

    God Loves You and will never love you less.

    http://www.vicsjavascripts.org/Home.htm

    If my post has been useful please donate to http://www.operationsmile.org.uk/


  •  

    Tags for this Thread

    Posting Permissions

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