Search code examples
jqueryhtmlpreloaderimage-preloader

Preload content of just one div with Jquery animated Preloader


I have a portfolio website with all the images in one container div. I currently have a JQuery preloader on the site which works great, it shows a loading bar and when it reaches 100% the website fades in. I'm wondering if I can just get this preloader in the one div that contains all my images and how I acheive that.

The plugin i'm using is QueryLoader and it's called using this code:

<script>
$(document).ready(function () {
$("body").queryLoader2({
    barColor: "#099",
    backgroundColor: "#fff",
    percentage: true,
    barHeight: 1,
    completeAnimation: "fade"
});
});
</script>

Thanks for your ideas in advance. The website is here: www.samskirrowdesign.com


Solution

  • I havent worked with the preloader but I will take a shot at it. I assume the html for the preloader would have to be inside the images div as well as the images.

    <script>
      $("#divId").load(function(){
            $(this).queryLoader2({
                barColor: "#099",
                backgroundColor: "#fff",
                percentage: true,
                barHeight: 1,
                completeAnimation: "fade"
            });
      });
    </script>