title: IntersectionObserver callback firing immediately on page load
body: <p>I'm very new to the <a href="https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API" rel="noreferrer">IntersectionObserver API</a>, and I've been experimenting with this code:</p>
  
  <pre><code>let target = document.querySelector('.lazy-load');
  
  let options = {
      root: null,
      rootMargin: '0px',
      threshold: 0
  }
  
  let observer = new IntersectionObserver(callback, options);
  
  observer.observe(target);
  
  function callback() {
      console.log('observer triggered.');
  }
  </code></pre>
  
  <p>This seems to work as it should, and <code>callback()</code> is called whenever <code>.lazy-load</code> element enters the viewport, but <code>callback()</code> also fires once when the page is initially loaded, which triggers `console.log('observer triggered.');</p>
  
  <p>Is there a reason for this callback to be triggered when the page loads? Or is there a mistake in how I'm implementing this?</p>
  
  <p><strong>Edit: Altering the code to the below still fires the callback at page load.</strong></p>
  
  <pre><code>let target = document.querySelector('.lazy-load');
  
  let options = {
      root: null,
      rootMargin: '0px',
      threshold: 0
  }
  
  let callback = function(entries, observer) {
      entries.forEach(entry =&gt; {
  
          console.log('observer triggered.');
  
      });
  };
  
  let observer = new IntersectionObserver(callback, options);
  
  observer.observe(target);
  </code></pre>