Skip to content
load only visible images via jquery
JavaScript
Find file
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.
example
README.md
jquery.load-visible-images.js

README.md

jQuery plugin - loadVisibleImages

Usage

Just put

<script src="jquery.load-visible-images" type="text/javascript"></script>

in you HTML-Head.

Now you can call loadVisibleImages() on any jQuery-Object.

Example

<div id="scrollable-div-container">
  <img src="loading-image.gif" data-img-src="the-real-image-src.jpg">
  <img src="loading-image.gif" data-img-src="the-real-image-src.jpg">
  <img src="loading-image.gif" data-img-src="the-real-image-src.jpg">
  <img src="loading-image.gif" data-img-src="the-real-image-src.jpg">
</div>

<script type="text/javascript" charset="utf-8">
  $(document).ready(function() { $('#scrollable-div-container').loadVisibleImages(); });
</script>

So if you div-container is smaller than the images to display and a scrollbar appears, all images will only be loaded if they are visible.

Something went wrong with that request. Please try again.