UIF Core // Progressive Images

What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

Progressive Images
ready

Introduction

Progressive image loading allows you to load a low res version of an image, and then asynchronously load the full-sized image. The benefit is a smaller initial page load size, and therefore, a faster initial load.

Examples

Using an inline image

<div class="progressive aspect-ratio--16/9">
      <img class="progressive__img"
        data-js="blur-up"
        data-pf-original-src="/v2.8/assets/images/content/splash-student-life-2.jpg"
        src="/v2.8/assets/images/content/low-res/splash-student-life-2.jpg" >
    </div>

Using a background image

<div class="progressive-background aspect-ratio--16/9"
      style="background-image: url('/v2.8/assets/images/content/low-res/splash-student-life-2.jpg');"
      data-js="blur-up"
      data-pf-original-src="/v2.8/assets/images/content/splash-student-life-2.jpg">
    </div>

Dependencies

src/styles/base/*.scss
src/styles/components/blocks/_progressive-image.scss
src/scripts/modules/pfProgressiveImageLoading.js

Usage

Class/JavaScript Hook	Description	Required?
`.aspect-ratio--16/9`	A helper class to create 16:9 intrinsically sized box.	Optional
`.aspect-ratio--julia`	This is a non-standard aspect ratio that we use on banners and videos.	Optional
`.progressive`	Placed on outer-most tag that will contain the progressive image to be loaded.	Required. When using the `img` tag approach
`.progressive__img`	Placed on `img` tag.	Required. When using the `img` tag approach
`.progressive-background`	Placed on the tag that will contain the low-res background image. It ensures the background image fills its space correctly.	Required. When using the background image approach
`[data-js='blur-up']`	Placed on tag that contains the low-res src	Required
`[data-pf-original-src='path/to/full-size.jpg']`	Placed on tag that contains the low-res src	Required. This is the image that will replace the low-res one.