SitePoint Sponsor

User Tag List

Results 1 to 4 of 4
  1. #1
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Preload DIV content

    Hi used various scripts to preload/fade in images, however i dont know how to preload the contents of a whole div, then fade it in.

    The structure is:
    HTML Code:
    <div id="maindiv">
    <div class="loader"></div>
    <div id="topbanner"></div>
    </div>
    Ive used the 'maindiv' to retain the structure of the page.
    The 'topbanner' div has a background image and numerous child divs and via css its display is initially hidden.
    In the page ive linked jquery and jquery.easing

    Could someone point me in the right direction..thanks in advance

  2. #2
    SitePoint Member
    Join Date
    Nov 2011
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Typically you would only need to preload if the object your showing requires a new HTTP request (so the preloading takes care of this in advance). Since the DIV you're showing does contain background images these could be preloaded.

    All you need to do is use your normal preload script to load up the background image(s). Once the preload is complete you can fade-in the DIV.

  3. #3
    SitePoint Member
    Join Date
    Apr 2011
    Posts
    17
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You could also hide it with CSS since the beginning, by applying CSS rule display:none;, and when you want to show it, just change the display type.
    Web designer, programmer & webmaster for 7+ years
    Hosting 11 sites in Hospedaje Web México
    CentOS|cPanel|R1Soft|Softaculous|Cloud Hosting|Green Hosting

  4. #4
    SitePoint Evangelist
    Join Date
    Mar 2006
    Posts
    407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    The initial state is hidden by css

    ... some of the divs contain dynamic content, and some have background images via css, therefore i dont know of as script (without listing the image urls) that can ascertain that all the images within the div have been loaded, then fade in..


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
  •