Check if div is above the fold in inline script

Question

We have a CMS, which constructs page out of components. Each component is having inline script to trigger XHR call to get content based on personalization. At a high level CMS generates structure like below

<html>
  <body>
    <!-- First component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
    <!-- Second component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
    <!-- Third component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
  <body>
<html>

From performance perspective, how to check if the parent div of script is above the fold or not without a plugin, trigger the XHR call based on that as user scrolls. There are some plugins like jQuery Lazy, but this might need heavy customization in CMS.

*above the fold* Please explain this. *is there a way*, most likely, Yes. — Rajesh, Dec 07 '18 at 11:02
By [above the fold](https://www.abtasty.com/blog/above-the-fold/) i mean the content which is visible in browser window. Say page contains 5 components, only 2 are visible in browser window (depends on user resolution and window size), rest would be visible when user scrolls. — Sandeep Kumar, Dec 07 '18 at 11:06
@SandeepKumar you could use a plugin such as jQuery Waypoints and simply make the AJAX requests once the containers are in view. — user7290573, Dec 07 '18 at 11:07
Can you clarify what you are asking? You answer "is there a way" directly in the question - so emphatically the answer is "obviously". Perhaps you are asking "How do I...without a plugin". — freedomn-m, Dec 07 '18 at 11:08
@freedomn-m, thanks edited question to clear "without plugin" — Sandeep Kumar, Dec 07 '18 at 11:10
You can check if a div is above the fold with `$(".component").position().top < $(window).height();` - but not so sure about the "parent of a script". — freedomn-m, Dec 07 '18 at 11:22
Parent of a script: https://stackoverflow.com/a/3326554/2181514 — freedomn-m, Dec 07 '18 at 11:23
You can use `Intersection Observer` to check if a DOM element is within a certain area, such as the visible part of the page: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API — Kokodoko, Dec 07 '18 at 11:43

freedomn-m · Accepted Answer · 2018-12-07T11:36:38.410

0

From this answer: https://stackoverflow.com/a/3326554/2181514

you can get the div of the currently running script (in jquery) using:

var div = $('script').last().parent();

note: this must not be in a document.ready ($(function() { ...)

If you don't load jquery in the <head> then use vanilla javascrpt from the answer linked above.

You can then compare the position of the div with the height of the current window:

var div = $('script').last().parent();
if (div.position().top < $(window).height()) {
    // do something here
    $(function() { div.fadeIn(); });
}

The question was about finding a script "above the fold" - but also asks "as the user scrolls" - these are two different things. If you're checking "as the user scrolls" then there's no need to know which script is the "current" script as it won't make sense by the time the user can scroll.

In this case, you would want to check the position of each element as the user scrolls (debounced).

edited Dec 07 '18 at 11:36

answered Dec 07 '18 at 11:28

freedomn-m

27,664
8
35
57

Thanks @freedomn-m, additionally I would need to add this inside scroll listener, is this understanding correct? – Sandeep Kumar Dec 07 '18 at 11:35
1

I was just adding details regarding that, but don't have time to get the specific code. You would not use this code if you're scrolling, it's only any use on initial load (as each script runs for the first time). Once the user has scrolled, they are no longer looking "above the fold" and individual scripts would not be running - so you'd need to trigger the ajax load once an element gets into view. Essentially "above the fold" and "as they users scrolls" are two very different questions. – freedomn-m Dec 07 '18 at 11:38

Check if div is above the fold in inline script

1 Answers1