Strange reloading after loading page that includes jquery

JavaScript
1

Hi Everybody and Happy New Year.

My new website index and some internal sections seem to load twice for some reason. The effect lasts just a second or less, and consists in a flickering to a blank white screen after the page has already loaded. It loads and then flickers to a blank page for an instant to load again.

After some testing, I have found out that the cause is the following jQuery code:

(function($){
  
    var jump=function(e)
    {
       if (e){
           e.preventDefault();
           var target = $(this).attr("href");
       }else{
           var target = location.hash;
       }

       $('html,body').animate(
       {
           scrollTop: $(target).offset().top
       },1000,function()
       {
           location.hash = target;
       });

    }

    $('html, body').hide()

    $(document).ready(function()
    {
        $('a[href^=\\#]').bind("click", jump);

        if (location.hash){
            setTimeout(function(){
                $('html, body').scrollTop(0).show()
                jump()
            }, 0);
        }else{
          $('html, body').show()
        }
    });
  
})(jQuery)

and this file loaded from Google

https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.js

I am absolutely sure cos the problem is solved by removing the link or de code from the page, and there is no problem with the pages without that code.

By the way, the issue appears just with Samsung browser, mobile Chrome and some others. Not many to tell the truth, and only in mobile phones and some devices.

Probably it has something to do with other problem:

https://www.sitepoint.com/community/t/problem-after-migration-to-latest-jquery-version/343608

Maybe the display:none property works for just a second before being removed. I am not sure.

2

Hi @andresb, from your code I don’t see why the page would reload, but as for the flickering you’re explicitly hide()ing the entire page and then show()ing it again once the DOM content got loaded:

$('html, body').hide()

$(document).ready(function () {
  // ...
  $('html, body').show()
})

Is there any reason for blanking the screen like this? Otherwise just try to remove the hiding and showing.

That’s just the jQuery library you’re using there.

2 Likes
3

.bind() is deprecated. You should consider replacing it with .on(), which is its replacement function.

4

I have replaced it. Thanks.

5

I removed the hiding and showing and seems to work. The problem is that I do not what is the purpose of this lines in the script. Can I simply remove them?

6

IDK but it looks like the original author wanted to enforce an animated scrolling to anchor elements, and prevent the browser default behaviour (and prior user interaction) for direct links in a rather crude manner. So if you visit your page with a fragment identifier in the URL you may get some jumping without it.

7

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.