1<!DOCTYPE html><html><head><meta charSet="utf-8" data-next-head=""/><meta name="viewport" content="initial-scale=1.0, width=device-width" data-next-head=""/><title data-next-head="">TwicPics x Next</title><link rel="preload" href="/_next/static/chunks/21bbd8bef648af16.css" as="style"/><link rel="preload" href="/_next/static/chunks/98e59639eb785395.css" as="style"/><link rel="stylesheet" href="/_next/static/chunks/21bbd8bef648af16.css" data-n-g=""/><link rel="stylesheet" href="/_next/static/chunks/98e59639eb785395.css" data-n-p=""/><noscript data-n-css=""></noscript>
1<script src="/_next/static/chunks/a15bc769500d745a.js" defer=""></script>
1<script src="/_next/static/chunks/23edd6987028f815.js" defer=""></script>
1<script src="/_next/static/chunks/b83e9443234e5d4a.js" defer=""></script>
1<script src="/_next/static/chunks/turbopack-8a216245f93c17ef.js" defer=""></script>
1<script src="/_next/static/chunks/e5bf3edb78285923.js" defer=""></script>
1<script src="/_next/static/chunks/e20ae30dd4ceaf0e.js" defer=""></script>
1<script src="/_next/static/chunks/turbopack-f5e074ec63c83cdc.js" defer=""></script>
1<script src="/_next/static/HsbBLMuRIXE7Jzha80tTO/_ssgManifest.js" defer=""></script>
1<script src="/_next/static/HsbBLMuRIXE7Jzha80tTO/_buildManifest.js" defer=""></script>
1</head><body><link rel="preload" as="image" href="https://assets.twicpics.com/demo/@twicpics-components/logos/twicpics-by-frontify.svg"/><link rel="preload" as="image" href="https://assets.twicpics.com/demo/@twicpics-components/logos/next-js.svg"/><link rel="preload" as="image" href="/assets/github-mark-white.svg"/><link rel="preload" as="image" href="/assets/stackblitz.svg"/><div id="__next"><div><header id="index-module-scss-module__5qE7ia__twic-header"><a href="/"><h1 class="index-module-scss-module__5qE7ia__heading-primary"><img class="index-module-scss-module__5qE7ia__twicpics-logo" src="https://assets.twicpics.com/demo/@twicpics-components/logos/twicpics-by-frontify.svg" alt="TwicPics logo"/><span>x</span><img class="index-module-scss-module__5qE7ia__framework-logo" src="https://assets.twicpics.com/demo/@twicpics-components/logos/next-js.svg" alt="React Logo"/></h1></a><div class="index-module-scss-module__5qE7ia__ribbon"><div><a target="_blank" href="https://github.com/TwicPics/components-demo-next/blob/main/pages/bulk-loading/index.jsx" rel="noreferrer" title="Open in Github"><img src="/assets/github-mark-white.svg" alt="Open in Github"/></a><a target="_blank" href="https://stackblitz.com/github/TwicPics/components-demo-next?file=pages/bulk-loading/index.jsx&initialpath=bulk-loading" rel="noreferrer" title="Open in StackBlitz"><img src="/assets/stackblitz.svg" alt="Open in StackBlitz"/></a></div></div><div class="index-module-scss-module__5qE7ia__tags-container"><div class="index-module-scss-module__5qE7ia__tag">@twicpics-components</div><a href="https://www.twicpics.com/docs/components/next?utm_source=github&utm_medium=organic&utm_campaign=components" target="_blank" class="index-module-scss-module__5qE7ia__tag index-module-scss-module__5qE7ia__documentation-link index-module-scss-module__5qE7ia__tag--bg-purple-rain" rel="noreferrer">Documentation</a></div></header><main id="index-module-scss-module__5qE7ia__twic-demo-container"><div class="index-module-scss-module__jFUJqq__twic-abstract"><h1>Bulk loading</h1><div><p>With<span class="index-module-scss-module__E8tk6G__twic-code">TwicImg</span>and<span class="index-module-scss-module__E8tk6G__twic-code">TwicVideo</span>your medias will only start loading when they come into the viewport.</p><p>But sometimes you may want to load multiple assets in bulk instead of lazy loading them.</p><p>This is where<span class="index-module-scss-module__E8tk6G__twic-code">TwicView</span>comes into play.</p><p>The<span class="index-module-scss-module__E8tk6G__twic-code">TwicView</span>components eager loads all of his<span class="index-module-scss-module__E8tk6G__twic-code">TwicImg</span>and <span class="index-module-scss-module__E8tk6G__twic-code">TwicVideo</span>children as soon as<span class="index-module-scss-module__E8tk6G__twic-code">TwicView</span>comes into the viewport (depending on your anticipation settings).</p><p>See also the <a href="/eager" target="_blank" rel="noreferrer">eager property</a> that disables lazy loading for a given media.</p></div></div><div data-twic-view=""><div class="index-module-scss-module__cdvEGG__polaroids"><div class="index-module-scss-module__cdvEGG__polaroid index-module-scss-module__cdvEGG__bottom index-module-scss-module__cdvEGG__left"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-1.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid index-module-scss-module__cdvEGG__bottom index-module-scss-module__cdvEGG__previous false"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-2.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid false index-module-scss-module__cdvEGG__left"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-1.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid false false"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-2.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid index-module-scss-module__cdvEGG__top index-module-scss-module__cdvEGG__left"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-3.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid false false"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-4.jpg" alt=""/><div></div></div></div></div><div class="index-module-scss-module__cdvEGG__polaroid false index-module-scss-module__cdvEGG__left"><div role="img" class="twic-i "><div class="twic-w twic-tf"><img data-twic-src="media:components/bulk-loading/pool-5.jpg" alt=""/><div></div></div></div></div></div></div></main></div></div>
1<script id="__NEXT_DATA__" type="application/json">{"props":{"pageProps":{}},"page":"/bulk-loading","query":{},"buildId":"HsbBLMuRIXE7Jzha80tTO","nextExport":true,"autoExport":true,"isFallback":false,"scriptLoader":[]}</script>
1</body></html>
Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.