Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

Make sure that inview also works with delegate & live events

  • Loading branch information...
commit 8b3ed2a4591f5f8b6230d5cc5913ca660c24e175 1 parent 11c30f9
Christopher Blum authored
Showing with 55 additions and 20 deletions.
  1. +15 −1 README.textile
  2. +18 −9 jquery.inview.js
  3. +22 −10 test/test.js
View
16 README.textile
@@ -39,9 +39,23 @@ p. Remember you can also bind once:
bc.. $('div').one('inview' fn);
+h2. Live events
+
+Yep, inview events can also be used with .live/.delegate methods.
+_Please note that this could slow down your app when the selector is too complex and/or matches a huge set of elements._
+The following code snippet only loads images when they appear in the browser's viewport.
+
+bc.. // Assuming that all images have set the _data-src_ attribute instead of the _src_ attribute
+ $("img[data-src]").live("inview", function() {
+ var $this = $(this);
+ $this.attr("src", $this.attr("data-src"));
+ // Remove it from the set of matching elements in order to avoid that the handler gets re-executed
+ $this.removeAttr("data-src");
+ });
+
h2. More complex example
-This way we can attach inView to some DIV in our code to, for example, detect when it FULLY readed by user (user sees it's bottom and top) and only after 1 seconds of view, so after we call some out stats function or whatever
+This way we can attach inview to some DIV in our code to, for example, detect when it FULLY readed by user (user sees it's bottom and top) and only after 1 seconds of view, so after we call some out stats function or whatever
bc.. $(someMyOneDiv).bind('inview', function(e, isInView, visiblePartX, visiblePartY) {
var elem = $(this);
View
27 jquery.inview.js
@@ -40,26 +40,35 @@
}
function checkInView() {
- var viewport, scrollTop, scrollLeft, elems = [];
+ var elems = [], elemsLength, i=0;
// naughty, but this is how it knows which elements to check for
$.each($.cache, function() {
if (this.events && this.events.inview) {
- elems.push(this.handle.elem);
+ if (this.events.live) {
+ var context = $(this.handle.elem);
+ $.each(this.events.live, function() {
+ elems = elems.concat(context.find(this.selector).toArray());
+ });
+ } else {
+ elems.push(this.handle.elem);
+ }
}
});
-
- if (elems.length) {
+
+
+ elemsLength = elems.length;
+ if (elemsLength) {
viewportSize = getViewportSize();
viewportOffset = getViewportOffset();
- $(elems).each(function() {
+ for (; i<elemsLength; i++) {
// Ignore elements that are not in the DOM tree
- if (!$.contains(document.documentElement, this)) {
- return;
+ if (!$.contains(document.documentElement, elems[i])) {
+ continue;
}
- var $el = $(this),
+ var $el = $(elems[i]),
elementSize = { height: $el.height(), width: $el.width() },
elementOffset = $el.offset(),
inView = $el.data('inview'),
@@ -84,7 +93,7 @@
} else if (inView) {
$el.data('inview', false).trigger('inview', [false]);
}
- });
+ };
}
}
View
32 test/test.js
@@ -1,9 +1,11 @@
module('jquery.inview', {
setup: function() {
$(window).scrollTop(0).scrollLeft(0);
-
- this.size = 20000;
- this.container = $('<div>');
+
+ this.size = 20000;
+ this.container = $('<div>', {
+ className: 'test-container'
+ }).appendTo("body");
this.element = $('<div>', {
html: 'testing ...',
className: 'test-element'
@@ -17,7 +19,7 @@ module('jquery.inview', {
teardown: function() {
$(window).scrollTop(0).scrollLeft(0);
-
+
this.container.remove();
this.element.remove();
}
@@ -223,30 +225,40 @@ test('Check visiblePartX & visiblePartY parameters #3', function() {
test('Check "live" events', function() {
- expect(1);
+ expect(3);
stop(2000);
- $("body > div.test-element").live("inview", function() {
+ var that = this,
+ elems = $("body .test-container > div.test-element");
+ elems.live("inview", function(event) {
+ elems.die("inview");
ok(true, "Live event correctly fired");
+ equals(event.currentTarget, that.element[0], "event.currentTarget correctly set");
+ equals(this, that.element[0], "Handler bound to target element");
+ start();
});
this.element.css({
top: '0',
left: '0'
- }).appendTo('body');
+ }).appendTo(this.container);
});
test('Check "delegate" events', function() {
- expect(1);
+ expect(3);
stop(2000);
- $("body").delegate(".test-element", "inview", function() {
+ var that = this;
+ this.container.delegate(".test-element", "inview", function(event) {
ok(true, "Delegated event correctly fired");
+ equals(event.currentTarget, that.element[0], "event.currentTarget correctly set");
+ equals(this, that.element[0], "Handler bound to target element");
+ start();
});
this.element.css({
top: '0',
left: '0'
- }).appendTo('body');
+ }).appendTo(this.container);
});
Please sign in to comment.
Something went wrong with that request. Please try again.