Permalink
Browse files

added demo link back to github

  • Loading branch information...
1 parent 64b4b9d commit c487f186f2bf05332561a5a35859167dc50426ae @Mottie committed Jan 14, 2012
Showing with 47 additions and 3 deletions.
  1. +29 −1 README.markdown
  2. +14 −1 demo/demo.css
  3. +4 −1 index.html
View
30 README.markdown
@@ -3,13 +3,41 @@
* This plugin runs a callback when targeted images have completed loading.
* It uses the "complete" flag and looks for an image height greater than zero to signal that the image had completed loading.
* Image height will already be set if set inline or in the css: `<img src="myimage.jpg" width="100" height="100">`.
- * Image height will be greater than zero if the image has alt text `<img src="myimage.jpg" alt="this make the image height greater than zero">`.
+ * Image height will be greater than zero if the image has alt text `<img src="myimage.jpg" alt="this makes the image height greater than zero">`.
* Image load errors are ignored
* In IE, this script uses the "fileSize" greater than zero instead of the complete flag as IE will not change the flag on load errors.
* I wrote this plugin before I knew about David DeSandro's [imagesloaded](https://github.com/desandro/imagesloaded) script.
* His plugin uses the image load event to determine if the image has loaded.
* I haven't done extensive testing on my plugin, so it if fails for some reason, try his plugin instead.
+# Setup
+
+Add the script tags to the `<head>` of your document
+
+```html
+<!-- jQuery (required) -->
+<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
+
+<!-- imagesLoaded plugin -->
+<script src="js/jquery.imagesloaded.js"></script>
+<script>
+$(function(){
+ $('.wrapper').imagesLoaded(function(){
+ alert('All images inside the wrapper have completed loading');
+ });
+});
+</script>
+```
+
+Example HTML
+
+```html
+<div class="wrapper">
+ <img src="image1.jpg">
+ <img src="image2.jpg">
+</div>
+```
+
# Licensing
* [MIT License](http://www.opensource.org/licenses/mit-license.php).
View
15 demo/demo.css
@@ -1,4 +1,17 @@
-#block, #load {
+body {
+ background: #333;
+ color: #ddd;
+}
+
+h1 {
+ text-align: center;
+}
+
+a:link { color: #9fcdff; text-decoration: none; }
+a:hover { color: #fff; }
+a:visited, a:active { color: #53a5ff; }
+
+#block, #load {
width: 960px;
margin: 0 auto;
text-align: center;
View
5 index.html
@@ -19,12 +19,15 @@
<body>
+<h1><a href="https://github.com/Mottie/imagesLoaded">imagesLoaded</a></h1>
+
<div id="block"></div>
<div id="load">
<button>Load Images</button>
+ <br>
<div></div>
- * Third image has a broken link on purpose
+ * Third image has a broken link on purpose.
</div>
</body>

0 comments on commit c487f18

Please sign in to comment.