title: "TypeError: e is null" when trying to preload webpage with jQuery
body: <p>I am trying to preload a webpage with jQuery based on this answer:
  <a href="https://stackoverflow.com/questions/23724793/preload-webpage-with-jquery?noredirect=1&amp;lq=1">Preload Webpage with jQuery</a></p>
  
  <p>I have <code>loader.html</code>, <code>second.html</code> and <code>loader.css</code> all in the same folder. The code below does work on a web server, but fails when I load <code>loader.html</code> from the local file system.</p>
  
  <p>Firefox console reports: 
  <code>TypeError: e is null</code>   <code>jquery-3.3.1.js:1509:1</code>. 
  jQuery code:</p>
  
  <pre><code>Sizzle.contains = function( context, elem ) {
      // Set document vars if needed
      if ( ( context.ownerDocument || context ) !== document ) { // ln.1509
          setDocument( context );
      }
      return contains( context, elem );
  };
  </code></pre>
  
  <p>(Similar error occurs with jQuery v2 and v1...)</p>
  
  <p>Is this something that can work from the local filesystem as well?</p>
  
  <p>The main page (loader.html):</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;Loader 2&lt;/title&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;link rel="stylesheet" type="text/css" href="loader.css"&gt;
  
      &lt;script src="https://code.jquery.com/jquery-3.3.1.js""&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body id=body&gt;
  
      &lt;div id="overlay"&gt;
            &lt;div class="spinner"&gt;&lt;/div&gt; 
      &lt;/div&gt;
  
      &lt;div id='second' &gt;&lt;/div&gt;
  
      &lt;script type="text/javascript"&gt;
  
          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');
              });
          });
  
      &lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>html for second.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;p&gt;Hello from second...&lt;/p&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>loader.css</p>
  
  <pre><code>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;
   }
  </code></pre>