jquery add opacity while scrolling and loading the page

Question

So I have a page that is loaded through pjax (non-pjax in IE) where a you have a bunch of links at the bottom.

Everytime you click on the hyperlinks , I make it scroll to the top of the page.

What's happening is that it scrolls to the top of the page while the page is still loading.

I am fine with that, but I was wondering is there a way to add some opacity while the page is loading? Note: I am not sure of a solution that would work in both pjax and non-pjax enabled browsers.

$(document).on('click', 'my-link a', function() {
  $('html, body').animate({ scrollTop: 0 }, 'fast');
})

;

Answer 1

根据要加载的内容，可以为onload添加事件侦听器，然后在onclick事件上滚动/将不透明度滚动/更改为较低的值，并在onload上还原。

Answer 2

I personally find your question really hard to understand, but I made an example for you:

DEMO

HTML:

<body>
    <div class="loader"></div>    
    <div id="content">
        <img src="http://0.tqn.com/d/studenttravel/1/0/i/T/Silleteros-1.jpg" />
    </div>
</body>

JS:

$(window).load(function() {
        $("body").css({ opacity: 1.0 });
})

CSS:

body {
    opacity: 0.5;
}

While page is loading, body is set to opacity 0.5 , after page is finished loading, opacity will be set to 1.0 .

Also added code to example fiddle that will not load image from cache, so that effect will always shown when fiddle is run (if effect is not shown when running it first time, try running it again). Hope this helps you.

jquery add opacity while scrolling and loading the page

Question

2 answers

solution1
0 2013-10-01 20:01:29

solution2
0 ACCPTED

jquery add opacity while scrolling and loading the page

Question

2 answers

solution1 0 2013-10-01 20:01:29

solution2 0 ACCPTED

solution1
0 2013-10-01 20:01:29

solution2
0 ACCPTED