Lazy Load Image

Potion Pack addon stack

Lazy loading images as the visitor scrolls to them can improve page load times when you must use large images on your page.

The Lazy Load Image stack is much like the Image stack, but uses a slightly different underlying structure. It holds off on loading the image until the visitor gets near to it when scrolling. This prevents extra overhead when loading the page when using large images.

  • Easy drag and drop image insertion
  • Set image alignment
  • Apply image sizing: Normal, upscale to 100%, or set a max-width
  • Choose between using a drag-and-drop image or a remote image
  • Apply image border shapes
  • Add links to your images
  • Add Tooltips

Example

We’ve used a rather large image files for our Lazy Load Image stack on this page to show that it doesn’t drag down the rest of the page’s load speed. The stack automatically begins loading the image as the visitor gets nearer it while scrolling.

Image
Image

Using Lazy Load Image

General

Image Type
Allows you to choose between using a drag-and-drop image or a remote based image for your lazy load image. When you choose which type you'd like to use you'll be given the appropriate controls for adding your image — a drop zone image well or a link picker for your remote image.

Style
Choose from four different image styles: Standard, Rounded, Circular, Thumbnail.

Alignment
Allows you to set the justification of your image. You can set the alignment to Left, Center or Right.

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Image stack.

Advanced

Image Sizing
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:

  • Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
  • Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.

Add Link
Enables you to add a link to your image that goes to an internal page, or an external site.

Alt. Tag.
Provides you a way to add an Alt. Tag to your image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Tooltip
Add a popup tooltip to your Button. These can be enabled on a per-icon basis. You can then set the tooltip text and its location, which can be set to either bottom, top, left or right.

  • Please Note: For Tooltips to work you must enable Tooltips in the Theme Vairations within the Foundry theme's settings!
Insight
Decrease Load Time

Lazy Load Image allows you to speed up your page's load time by putting off loading images until they're needed.