Jquery load page

Question

I'm trying to create a simple website http://cone.hostei.com/index3.html using jquery. I just want to load html pages into a div using .load() function. The problem is that functions - $('.preloader').hide() and ({ opacity : 1 }), fire before page and its images are fully loaded into a div! how can I fix it?

$(window).load(function () {
 $('li a').click(function () { //event on click
    var toLoad = $(this).attr('href'); //get href of a li element
    $('.load-in').fadeOut('fast', loadContent);
    $('.loader').show(); //show the loader


    function loadContent() {
        $('.load-in').css({ //set opacity 0.3
            opacity: 0.3
        }).load(toLoad, hideLoad); //load html page, then callback
    };


    function hideLoad() {
        $('.load-in').fadeIn('fast',

        function () { //hide preloader and set opacity 1
            $('.loader').fadeOut('fast');
            $('.load-in').animate({
                opacity: 1
            });
        });
    };
    return false;
 });
});

Your question is unclear. No offence, the code is poorly structured on your page as well. It's very hard to decipher what your intent is. — aziz punjani
– aziz punjani, Commented Apr 10, 2013 at 2:47
you need to copy the relevant code to the question, not just a link to a web page — Arun P Johny
– Arun P Johny, Commented Apr 10, 2013 at 2:58

EthanTowne · Accepted Answer · 2013-04-10 02:46:36Z

1

You need to make sure to put your jQuery code inside the $(document).ready() handler. This will make sure your code runs after all elements in the page have been loaded.

See the jQuery API page: jQuery - .ready()

answered Apr 10, 2013 at 2:46

EthanTowne

3514 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

aziz punjani Over a year ago

It's already in a window.load on his page. Look at the code.

plalx Over a year ago

That is not the issue at all. Read the question.

plalx · Accepted Answer · 2013-04-10 03:30:21Z

0

If you want to detect when the images are fully loaded so that you don't see them appear after the content was shown, you will have to attach a load event handler on all images contained in the .load-in element and wait before all the images are loaded before fading in the element and fading out the loading indicator.

Something like this (based on code from your site):

function loadContent() {
    var $loadIn = $('.load-in');

    $loadIn.css({ opacity : 0.3 }).load(toLoad , function () {
        var $images = $('img', $loadIn),
            imageCount = $images.length,
            loadedCount = 0;

            //wait on images before showing the content
            $images.on('load', function () {
                if (++loadedCount === imageCount) {
                    $images.off('load');
                    hideLoad();
                }
            });

           //make sure the content is still shown if images fails to load
           //or are very slow to load
           setTimeout(function () {
               if (loadedCount !== imageCount) {
                   $images.off('load');
                   hideLoad();
               }
           }, 5000);
    });   
};

However, here's some things you should know (taken from http://api.jquery.com/load-event/):

Caveats of the load event when used with images A common challenge developers attempt to solve using the .load() shortcut is to execute a function when an image (or collection of images) have completely loaded. There are several known caveats with this that should be noted. These are:

It doesn't work consistently nor reliably cross-browser

It doesn't fire correctly in WebKit if the image src is set to the same src as before

It doesn't correctly bubble up the DOM tree

Can cease to fire for images that already live in the browser's cache

edited Apr 10, 2013 at 3:30

answered Apr 10, 2013 at 2:55

plalx

43.8k7 gold badges77 silver badges94 bronze badges

4 Comments

Coneenoc Over a year ago

Thx a lot for your help, I Am a rookie in Jquery, if it woun't trouble you much, could you show how to do it?!

plalx Over a year ago

@user2264246, well I just did in my answer, however I have not tested but that's the idea.

plalx Over a year ago

@user2264246, so you tried my solution and it's not working? Do you get any errors or it doesn't give the expected result?

Coneenoc Over a year ago

Sorry! Maybe I', blind or something, but I can't find ACCEPT button here! I see only ACCEPTED in your message above, that's it! Maybe it's browser issue!

Collectives™ on Stack Overflow

Jquery load page

2 Answers 2

2 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related