1

I am trying to preload a webpage with jQuery based on this answer: Preload Webpage with jQuery

I have loader.html, second.html and loader.css all in the same folder. The code below does work on a web server, but fails when I load loader.html from the local file system.

Firefox console reports: TypeError: e is null jquery-3.3.1.js:1509:1. jQuery code:

Sizzle.contains = function( context, elem ) {
    // Set document vars if needed
    if ( ( context.ownerDocument || context ) !== document ) { // ln.1509
        setDocument( context );
    }
    return contains( context, elem );
};

(Similar error occurs with jQuery v2 and v1...)

Is this something that can work from the local filesystem as well?

The main page (loader.html):

<!DOCTYPE html>
<html>
<head>
    <title>Loader 2</title>
    <meta charset="utf-8">
    <link rel="stylesheet" type="text/css" href="loader.css">

    <script src="https://code.jquery.com/jquery-3.3.1.js""></script>
</head>
<body id=body>

    <div id="overlay">
          <div class="spinner"></div> 
    </div>

    <div id='second' ></div>

    <script type="text/javascript">

        var overlay = document.getElementById("overlay");

        $(document).ready(function () {
            console.log('ready..');

            $.get('second.html', function(data) {
                console.log(data);
                $('#second').html(data)
                overlay.style.display = 'none';
                console.log('get done');
            });
        });

    </script>
</body>
</html>

html for second.html:

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <p>Hello from second...</p>
</body>
</html>

loader.css

body{
    width: 100%;

    overflow-x: hidden;
}

.spinner{
    width: 80px;
    height: 80px;

    border: 6px solid #f3f3f3;
    border-top: 6px solid #f25a41;
    border-radius: 100%;

    position: absolute;
    top:0;
    bottom:0;
    left:0;
    right: 0;
    margin: auto;

    animation: spin 1s infinite linear;
}

@keyframes spin {
    from{
        transform: rotate(0deg);
    }to{
        transform: rotate(360deg);
    }
}

#overlay{
  height:100%;
  width:100%;
  /*background:rgba(0, 0, 0, 1);*/
  background: white;
  position:fixed;
  left:0;
  top:0;
 }
RaelB
  • 3,301
  • 5
  • 35
  • 55
  • 1
    In which line/file is the error thrown? Is this all your code, as you don't have a variable `e` defined/used. – empiric Jun 28 '18 at 07:33
  • The code generally seems to work: [Example](http://jsfiddle.net/xpvt214o/318639/), I just had to change `get` to `post` to make it work in the fiddle – empiric Jun 28 '18 at 07:35
  • I updated my question. It does work ok using `get` on a web server, but fails on the local file system... – RaelB Jun 28 '18 at 07:52
  • I just noticed a small typo, there is a `"` too much in the path to the jQuery file. Have you checked if jQuery is loaded properly locally? – empiric Jun 28 '18 at 07:58
  • I fixed that but it does not make a difference. jQuery is working correctly. – RaelB Jun 28 '18 at 08:04

0 Answers0