diff --git a/.gitignore b/.gitignore index 8ff54e8..75221c8 100644 --- a/.gitignore +++ b/.gitignore @@ -1 +1,3 @@ -archive \ No newline at end of file +archive +node_module +_SpecRunner.html \ No newline at end of file diff --git a/.travis.yml b/.travis.yml new file mode 100644 index 0000000..d2f3209 --- /dev/null +++ b/.travis.yml @@ -0,0 +1 @@ +language: node_js \ No newline at end of file diff --git a/README.md b/README.md index b8438d9..a359b2e 100644 --- a/README.md +++ b/README.md @@ -1,174 +1,179 @@ # Jquery Asynchronous Image Loader (JAIL) -JAIL helps loading images asynchronously and it can be used to make your page load faster. +JAIL is a jQuery plugin that lazy load images making your page load faster. -Selected images will be downloaded if they are visible and when they are visible inside the viewport (rectangular viewing region). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay. It's advisable to call jail() after the DOM has been constructed (document ready). +Images are downloaded when they are visible or when they become visible inside the viewport (area you see in your browser). Images can be loaded after an event is triggered (such as `click`, `mouseover`, and `scroll`) or after a specified delay. It's advisable to call jail() after the DOM has been constructed (document ready). -First of all, this plugin requires you to make some HTML changes. The `data-src` ('data-href' prior version 0.9.8) attribute (HTML5 data attribute) should contain the location of the image, instead the `src` attribute should contain a placeholder such as a really tiny image (E.g. 1 px x 1 px). Also, I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the images will be displayed (progressive enhancement). +## Getting Started -
-	
-		<img class="lazy" src="/img/blank.gif" data-src="/img/image1.jpg" >
-		<noscript>
-			<img src="/img/image1.jpg" >
-		<noscript>
-	
-
+First of all, this plugin requires you to make some HTML changes. The `data-src` attribute (HTML5 data attribute) should contain the location of the image, instead the `src` attribute should contain a placeholder such as a really tiny image (E.g. 1 px x 1 px). Also, I would suggest to add a `noscript` block so that in case the user doesn't have Javascript enabled, the images will be displayed (progressive enhancement). -In a basic scenario, you just need to import `jquery`, `jail.js` and call the function on the images you want to lazy load. +```html + +