tuupola/lazyload

★ 8,729JavaScriptAudience · developerComplexity · 1/5LicenseSetup · easy

Mindmap

mindmap
  root((lazyload))
    What it does
      Delays image loading
      Viewport-only fetch
    How it works
      jQuery plugin
      data-original attribute
    Use cases
      Faster page load
      Reduce server requests
    Audience
      Web developers
      jQuery projects
    License
      MIT open source

mindmap root((lazyload)) What it does Delays image loading Viewport-only fetch How it works jQuery plugin data-original attribute Use cases Faster page load Reduce server requests Audience Web developers jQuery projects License MIT open source

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Add lazy image loading to an existing jQuery website to reduce how long it takes for the page to first appear

USE CASE 2

Reduce server image requests on long pages where many visitors never scroll to the bottom

USE CASE 3

Integrate lazy loading into a legacy jQuery project without switching to a modern framework

Tech stack

JavaScriptjQuery

Getting it running

Difficulty · easy Time to first run · 5min

Requires jQuery already on the page, this is a legacy plugin, the author now recommends a vanilla JS version for new projects.

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

In plain English

Lazyload is a jQuery plugin that delays the loading of images on a web page until the user actually scrolls down to see them. Normally, a browser tries to load every image on a page as soon as it opens, even images far below the fold that the visitor may never reach. This plugin changes that behavior so only images visible in the current viewport are loaded right away, and the rest wait. The benefit is a faster initial page load. When a page contains many large images, loading them all upfront can slow things down considerably. With this plugin, the browser reaches its ready state sooner because it only fetches the images currently on screen. As a side effect, this can also reduce the number of requests hitting the server if visitors leave before scrolling all the way down. Setup requires jQuery already present on the page. You add the plugin script, then change your image tags slightly: instead of a normal src attribute pointing to the image file, you put that URL in a data-original attribute and give the image a class like lazy. A single line of JavaScript then activates the plugin on those images. That is the entire integration. Installation can be done via Bower or npm, two common JavaScript package managers, making it easy to pull the plugin into an existing project without manually downloading files. The project is marked as a legacy plugin, originally built around an older version of jQuery, and the author now recommends a separate vanilla JavaScript version for new projects. The code is released under the MIT License, which places very few restrictions on how you can use or modify it.

Copy-paste prompts

Prompt 1

I have a jQuery website with 50 product images that loads slowly. Show me how to set up tuupola/lazyload so images only fetch when they enter the viewport.

Prompt 2

My webpage loads slowly because of many large images. Using lazyload.js with jQuery, help me convert my img src tags to use data-original and activate the plugin.

Prompt 3

I'm using tuupola/lazyload on my site. How do I customize the threshold so images start loading 200px before they enter the viewport?

Open on GitHub → Explain another repo

← tuupola on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.