Simple and Minimal Image/Video Lazy Load Plugin with jQuery - sleepyHead

File Size: 5.43KB
Views Total: 2235
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   
Simple and Minimal Image/Video Lazy Load Plugin with jQuery - sleepyHead

sleepyHead is a dead-simple and fast jQuery plugin for lazy loading images and videos (youtube, vimeo, etc) with just one JS call. The plugin will only start loading images/videos when they're visible in the viewport.

How to use it:

1. Load the latest jQuery javascript library and sleepyhead plugin in the head section.

<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<script src="jquery.sleepyHead.js"></script>

2. Insert images and videos with data-src attribute pointing to the source in your page..

<img data-src="1.jpg" height="" width="">
<img data-src="2.jpg" height="" width="">
<img data-src="3.jpg" height="" width="">
...
<iframe data-src="http://player.vimeo.com/video/43311073" width="" height="" frameborder="0"></iframe>

3. Just call the function and the plugin will do the rest.

<script>
$(document).ready(function() {
$('img').sleepyHead();
$('iframe').sleepyHead();
});
</script>

This awesome jQuery plugin is developed by Moonfuse. For more Advanced Usages, please check the demo page or visit the official website.