Skip to content

Commit

Permalink
wip: option for event to monitor
Browse files Browse the repository at this point in the history
  • Loading branch information
@sjwilliams
sjwilliams committed Nov 17, 2015
1 parent 7b578c9 commit 5683b24
Show file tree
Hide file tree
Showing 2 changed files with 150 additions and 8 deletions.
135 changes: 135 additions & 0 deletions examples/vertical.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,135 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width">
<title>Horizontal LaziestLoader example</title>
<style>
body {
margin: 0;
padding: 0;
background-color: #000;
}

ul {
display: block;
margin: 0 auto;
padding: 0;
}

li {
list-style-type: none;
padding: 0;
margin: 30px auto;
max-width: 1300px;
}

.ll-init {
width: 100%;
transition: opacity 0.3s ease-out;
opacity: 0;
}

.ll-loaded {
opacity: 1;
}

h2 {
position: absolute;
-webkit-transform: translateZ(0px);
-webkit-backface-visibility: hidden;
margin: 0;
z-index: 1;
bottom: 40px;

font-family: Helvetica;
text-align: center;
width: 100%;
color: #fff;
text-shadow: #333 0px 0px 2px, #000 0px 0px 6px;
}
</style>
</head>

<body>
<h2>Scroll ↓</h2>
<ul class="images">
<li>
<img id="one" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0001-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="two" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0002-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="three" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0003-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="four" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0004-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="five" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0005-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>

<li>
<img id="six" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0006-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>

<li>
<img id="seven" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0007-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="eight" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0008-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="nine" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/sunset-flipbook/photos/baybridge-flipbook-0009-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="ten" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6674-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>

<li>
<img id="eleven" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6674-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="twelve" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6675-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="thirteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6676-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="fourteen " class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6677-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="fifteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6678-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>


<li>
<img id="sixteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6679-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="seventeen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6680-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="eighteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6681-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="nineteen" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6684-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
<li>
<img id="twenty" class="lazy" src="../img/transparent.gif" data-ratio="0.666666667" data-pattern="https://joshwilliams.com/projects/flipbook-texas137/photos/flipbook-tx137-6685-{{size}}.jpg" data-widths="[320, 640, 900, 1280, 1600]">
</li>
</ul>
<script src="../jquery-1.9.1.min.js"></script>
<script src="../jquery.laziestloader.js"></script>
<script>
$('.lazy').laziestloader({
threshold: 150
});

</script>
</body>

</html>
23 changes: 15 additions & 8 deletions jquery.laziestloader.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@
threshold: 0,
sizePattern: /{{SIZE}}/ig,
getSource: getSource,
event: 'scroll',
scrollThrottle: 250, // time in ms to throttle scroll. Increase for better performance.
sizeOffsetPercent: 0, // prefer smaller images
setSourceMode: true // plugin sets source attribute of the element. Set to false if you would like to, instead, use the callback to completely manage the element on trigger.
Expand Down Expand Up @@ -246,17 +247,23 @@
bindLoader();


// throttled scroll events
$w.scroll(function() {
// bind to event. default to scroll.
$w.on(options.event, function(){
didScroll = true;
});

setInterval(function() {
if (didScroll) {
didScroll = false;
laziestloader();
}
}, options.scrollThrottle);

// throttled scroll event
if (0 === options.event.indexOf('scroll')) {
setInterval(function() {
if (didScroll) {
didScroll = false;
laziestloader();
}
}, options.scrollThrottle);
}



// reset state on resize
$w.resize(function() {
Expand Down

0 comments on commit 5683b24

Please sign in to comment.