Lazy Load

Lazyload Pagekit extension

Your website makes use of the power of images? Well, that's fine.

But sometimes, it's hard to load 10MB at once. This extension makes your images lazy-loadable and improves the speed and usability of your website.

How to use


Using this extension is very easy. Just install it from Pagekit's marketplace.


There are no special requirements. If Pagekit works this extension will work, too.


After enabling the extension just open the extension's settings. You will find a few options, which can be configured:

  • HTML Class: Define a HTML class that you would like to add to the images, which should be lazy-loaded (Default: lazy)
  • Effect: There are two effects available at the moment (Default: show):
    • Show
    • Fade
  • Effect duration: The duration of the effect in ms (Default: 2000)
  • Threshold: The amount of pixels below the viewport, in which the images are being loaded before the user can see them (Default: 0)
  • Visible Only: If activated, only the visible elements are being loaded (Default: true)
  • Scroll direction: Determines the direction (Default: both)
    • Both
    • Vertical
    • Horizontal
  • Add Default Image: Adds a default image/placeholder to every image. (Default: false)
    • Default Image Data URI: The data uri of the default image
  • Enable callback: Allows to perform JavaScript functions on different events (Default: false)
    • Before Load: Triggers before loading an image
    • After Load: Triggers after loading an image
    • On Error: Triggers on error
    • On Finished All: Triggers after all images are loaded


Wait a second!

Did you know that there's are great support channels for Pagekit? Visit us today and sign up for free using email or your GitHub-, Twitter-, Google- or Facebook-Account.

Latest blog posts

Latest comments

  • How to fork a theme

  • spqr/toc updated

  • spqr/toc updated

Like my work?

If you would like to support my work, you are invited to do so.