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 2 of 2
  1. #1
    New Coder
    Join Date
    Feb 2011
    Posts
    12
    Thanks
    5
    Thanked 0 Times in 0 Posts

    Need help with a Gallery/Portfolio

    I've tried hosting my WIP website to see how it works. Everything goes well except for the following:
    On my Portfolio page:
    [Portfolio]

    I have coded a "gallery" in jquery.
    When the page starts loading it seems that the browser loads the `
    Code:
    #portfolioSlider
    ` div which is supposed to be display:none until triggered. It contains lots of images resulting in massive load time until the thumbnails ( `#Portfolio` ) starts loading.

    How can I make the `
    Code:
    #portfolioSlider
    ` images start loading only after it opens?

    Thanks in advance!
    Last edited by alexgrozav; 07-04-2011 at 08:18 AM.

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,398
    Thanks
    12
    Thanked 570 Times in 563 Posts
    But #portfolioSlider is display:block right from the start. Only the .portfolioSlide elements are display:none

    But that can still not prevent all the images from loading. If you only want to load the images "just before" they show, you'll have to implement some sort of intelligent image pre-loading

    Let's assume you only want to load the images from the tab that is already showing, so that the bigger images will immediately show. So on tab change you should add all the required images to the .portfolioSlide elements using javascript
    Code:
    var theElement = document.getElementById('tripfish');
    var theSlideBG = theElement.getElementsByClassName('slideBG')[0];
    var newImage = document.createElement('img');
    newImage.src = 'gallery/tripfish.jpg';
    newImage.width = 940;
    newImage.height = 822;
    theElement.insertBefore(newImage, theSlideBG);
    You will have to do that for all the images on the current tab as soon as the tab changes


  •  

    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
    •