> Portal Navigation:
> 
> - Append `.md` to any URL under `https://dev.wix.com/docs/` to get its markdown version.
> - Pages are either content pages (article or reference text) or menu pages (a list of links to child pages).
> - To get a menu page, truncate any URL to a parent path and append `.md` (e.g. `https://dev.wix.com/docs/sdk.md`, `https://dev.wix.com/docs/sdk/core-modules.md`).
> - Top-level index of all portals: https://dev.wix.com/docs/llms.txt
> - Full concatenated docs: https://dev.wix.com/docs/llms-full.txt

## Resource: Functions

## Article: Functions

## Article Link: https://dev.wix.com/docs/sdk/site-sdk/rendering-and-performance/above-the-fold/functions.md

## Article Content:

import { Property, PropertyList, ExpandableSection, RequestResponseExamples } from "@wix/docs-ui/content";

{/* Generated by @wix/tw-typedoc-to-wix-docs from packages/site-service-above-the-fold/src/definition/index.ts. Do not edit this file directly — edit the TSDoc in the source package. */}

# Above the Fold Functions

## isInFirstFold()

Checks whether a component is above the fold on the current page.

Use it to decide what to load or render first, such as loading an image right away when it's
above the fold and lazily when it isn't.

Returns `undefined` for a component that isn't marked, and never throws. Treat anything other than
`true` as not above the fold.

The result describes the page's initial layout, not where the site visitor has scrolled to. This
value doesn't change for the lifetime of the page. The method does the same lookup while the page
renders on the server and in the browser.

The result is based on the page's layout, not on the site visitor's screen size, so use it to
prioritize loading, not to tell whether a component is visible.

### Method Declaration

```ts
isInFirstFold(key: string): boolean | undefined
```

### Method Parameters

<PropertyList bordered>
  <Property name="key" type="string" required>
    Component ID. Case-sensitive, and must match the component's ID exactly.
  </Property>
</PropertyList>

### Returns

<PropertyList bordered>
  <Property name="Return Type:" type="boolean | undefined">
    Whether the component is above the fold:
    - `true`: The host marks the component as above the fold.
    - `false`: The host marks the component as not above the fold.
    - `undefined`: The host doesn't mark the component.
  </Property>
</PropertyList>

### Examples

<RequestResponseExamples defaultName="isInFirstFold" requestName="JavaScript" requestType="JavaScript" examples={[
  {
    title: `Load an image right away when it's above the fold`,
    content: {
      methodExample: {
        Request: `~~~tsx
import { useService } from '@wix/services-manager-react'
import { AboveTheFoldDefinition } from '@wix/site-service-above-the-fold/definition'

function ProductImage({ id, src, alt }: { id: string; src: string; alt: string }) {
    const aboveTheFoldService = useService(AboveTheFoldDefinition)
    const isAboveTheFold = aboveTheFoldService.isInFirstFold(id)

    return (
        <img
            id={id}
            src={src}
            alt={alt}
            loading={isAboveTheFold ? 'eager' : 'lazy'}
            fetchPriority={isAboveTheFold ? 'high' : 'auto'}
        />
    )
}
~~~`
      }
    }
  },
  {
    title: `Preload the images of components above the fold`,
    content: {
      methodExample: {
        Request: `~~~ts
// aboveTheFoldService is resolved from @wix/site-service-above-the-fold, as in the first example.
function imagesToPreload(images: { compId: string; src: string }[]) {
    return images
        .filter(({ compId }) => aboveTheFoldService.isInFirstFold(compId))
        .map(({ src }) => src)
}
~~~`
      }
    }
  }
]} />