Skip to content

Commit

Permalink
Use jQuery 1.7.0. Remove timestamping from images. Use data-original …
Browse files Browse the repository at this point in the history 
…attribute.
  • Loading branch information
@tuupola
tuupola committed Nov 17, 2011
1 parent 4c4327e commit 273011a
Show file tree
Hide file tree
Showing 8 changed files with 65 additions and 72 deletions.
15 changes: 7 additions & 8 deletions disabled.html
View file
Expand Up @@ -7,7 +7,7 @@
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
</script>
Expand Down Expand Up @@ -49,12 +49,12 @@ <h2>Plugin disabled</h2>
<a href="enabled_gazillion.html">gazillion images</a>.
</p>

<img src="img/bmw_m1_hood.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg?<?php print time() ?>" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg?<?php print time() ?>" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg?<?php print time() ?>" width="765" height="574" alt="Corvette Pitstop"><br/>
<img src="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>

</div>
<div id="sidebar">
Expand All @@ -64,7 +64,6 @@ <h2>Plugin disabled</h2>
<div id="footer">
</div>

<script src="/mint/?js" type="text/javascript"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
Expand Down
26 changes: 13 additions & 13 deletions enabled.html
View file
Expand Up @@ -6,14 +6,13 @@
<title>Lazy Load Enabled</title>
<meta name="generator" content="Mephisto" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({placeholder : "img/grey.gif"});
$("img").lazyload({effect: "fadeIn"});
});
</script>
<script src="/mint/?js" type="text/javascript"></script>
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<style type="text/css">
#sidebar {
Expand Down Expand Up @@ -50,24 +49,25 @@ <h2>Plugin enabled</h2>

<p>
Images below the fold (the ones lower than window bottom) are not loaded. When scrolling down
they are loaded when needed. Shift-reload to test again. Compare this to page where plugin is
<a href="disabled.html">disabled</a>, same page with <a href="enabled_fadein.html">fadein effect</a>,
page with <a href="enabled_wide.html">wide layout</a> or wide content <a href="enabled_wide_container.html">inside container</a>.
they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page
where plugin is <a href="disabled.html">disabled</a>, same page with
<a href="enabled_fadein.html">fadein effect</a>, page with <a href="enabled_wide.html">wide
layout</a> or wide content <a href="enabled_wide_container.html">inside container</a>.
</p>

<code>
<pre>
$("img").lazyload({
placeholder : "img/grey.gif"
effect : "fadeIn"
});</pre>
</code>

<img src="img/bmw_m1_hood.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg?<?php print time() ?>" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg?<?php print time() ?>" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg?<?php print time() ?>" width="765" height="574" alt="Corvette Pitstop"><br/>
<img src="img/grey.gif" data-original="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/grey.gif" data-original="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/grey.gif" data-original="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
<img src="img/grey.gif" data-original="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/grey.gif" data-original="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/grey.gif" data-original="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>

</div>
<div id="sidebar">
Expand Down
21 changes: 10 additions & 11 deletions enabled_container.html
View file
Expand Up @@ -7,11 +7,11 @@
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
$("img").lazyload({placeholder : "img/grey.gif", container: $("#container")});
$("img").lazyload({effect : "fadeIn", container: $("#container")});
});
</script>
<style type="text/css">
Expand Down Expand Up @@ -54,25 +54,25 @@ <h2>Plugin enabled on container</h2>

<p>
Images below the visible area (the ones lower than container bottom) are not loaded. When scrolling down
they are loaded when needed. Shift-reload to test again. Compare this to page where plugin is
they are loaded when needed. Empty cache and shift-reload to test again. Compare this to page where plugin is
<a href="disabled.html">disabled</a> or same page with <a href="enabled_fadein.html">fadein effect</a>.
</p>

<code>
<pre>
$("img").lazyload({
placeholder : "img/grey.gif",
effect : "fadeIn",
container: $("#container")
});</pre>
</code>

<div id="container">
<img src="img/bmw_m1_hood.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg?<?php print time() ?>" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg?<?php print time() ?>" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg?<?php print time() ?>" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg?<?php print time() ?>" width="765" height="574" alt="Corvette Pitstop"><br/>
<img src="img/bmw_m1_hood.jpg" width="765" height="574" alt="BMW M1 Hood"><br/>
<img src="img/bmw_m1_side.jpg" width="765" height="574" alt="BMW M1 Side"><br/>
<img src="img/viper_1.jpg" width="765" height="574" alt="Viper 1"><br/>
<img src="img/viper_corner.jpg" width="765" height="574" alt="Viper Corner"><br/>
<img src="img/bmw_m3_gt.jpg" width="765" height="574" alt="BMW M3 GT"><br/>
<img src="img/corvette_pitstop.jpg" width="765" height="574" alt="Corvette Pitstop"><br/>
</div>

</div>
Expand All @@ -83,7 +83,6 @@ <h2>Plugin enabled on container</h2>
<div id="footer">
</div>

<script src="/mint/?js" type="text/javascript"></script>
<script src="http://www.google-analytics.com/urchin.js" type="text/javascript"></script>
<script type="text/javascript">
_uacct = "UA-190966-1";
Expand Down
3 changes: 1 addition & 2 deletions enabled_fadein.html
View file
Expand Up @@ -7,7 +7,7 @@
<meta name="generator" content="Mephisto" />
<link href="http://www.appelsiini.net/stylesheets/main2.css" rel="stylesheet" type="text/css" />
<link rel="alternate" type="application/atom+xml" href="http://feeds.feedburner.com/tuupola" title="Atom feed" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.lazyload.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
$(function() {
Expand All @@ -17,7 +17,6 @@
});
});
</script>
<script src="/mint/?js" type="text/javascript"></script>
<style type="text/css">
#sidebar {
width: 0px;
Expand Down

0 comments on commit 273011a

Please sign in to comment.