Enhancement: Only Display images that are in or overlap the view port
tmorehouse opened this issue · comments
Right now, it appears that the images above the fold (top of the body to the bottom of the view port will load. Even if htey are not visible.
Say you have a very long page with 100 images. And the user is taken to the page with a link with a hash that links to the bottom most image on the page: i.e
Echo currently loads all images above the ones on the bottom of the page. One fix could be to check to see if the image overlaps the view port. A change to the _inView function like this works well:
var _inView = function (element) {
var coords = element.getBoundingClientRect();
var win = {
left: 0 - offset,
top: 0 - offset,
bottom: (window.innerHeight || document.documentElement.clientHeight) + offset,
right: (window.innerWidth || document.documentElement.clientWidth) + offset
}
return (coords.right >= win.left && coords.bottom >= win.top &&
coords.left <= win.right && coords.top <= win.bottom);
};
I've created a jsfiddle with a working example: http://jsfiddle.net/VxrLe/1/
Click the "Go To Bottom" link, then scroll up on the page to see the effect. I've used a long throttle value of 500 to make the delayed loading more evident.
@tmorehouse I patched this issue in my PR here: #39
Closing as merged #39
OK Cool.
The above code also works for left and right of the view port as well.
Ace @tmorehouse ! Great jsFiddle. Did you test for IE8 as well? Aiming to support it in this project too. Could be worth integrating, what do you think @raphaeleidus ?
worth integrating. @toddmotto @tmorehouse right now for the above and below you can specify individual offsets, want to support individual offsets for left and right as well?
I have IE8 and IE9 on machine, and I tested a local copy and it works. However, jsFiddle itself (not the sample) fails on IE8.
But the actual sample does work on IE8+
IE8 is known not to do a great job at getBoundingClientRect, unless all your containers/elements have a position (i.e. relative, etc) it is decent. By using a larger offset you can kinda get around the IE8 stupidity.
I think you could do something similar for left and right as well, and have it default to the general offset.
Although the calculations using a single offset are easier.
The test I did was basically to check if the image is not in the viewport and than inverted the test (i.e. changed > to <= and switched the || to &&)
I think supporting more use cases it probably better, and it isn't that much more code for some nice added flexibility. I will take a stab at implementing this now, give me a few minutes
Cool...
IE <8 will not work of course... since it does not support getBoundingClientRect
Although there is a small poly fill for that, but it is slow. Easiest thing to do for IE <8 is a conditional comment at the bottom of the page to load all the images.
I suppose you could do it like this:
var _inView = function (element) {
var coords = element.getBoundingClientRect();
var win = {
left: 0 - leftOffset,
top: 0 - topOoffset,
bottom: (window.innerHeight || document.documentElement.clientHeight) + bottomOffset,
right: (window.innerWidth || document.documentElement.clientWidth) + rightOffset
}
return (coords.right >= win.left && coords.bottom >= win.top &&
coords.left <= win.right && coords.top <= win.bottom);
};
And just pre-calculate the 4 offset values on init (and default them to the general offset)
that is almost exactly what the code does now.
Not worried about IE8<, using querySelector too :)
Sent from my iPhone
On 10 May 2014, at 23:23, Troy Morehouse notifications@github.com wrote:
Cool...
IE <8 will not work of course... since it does not support getBoundingClientRect
Although there is a small poly fill for that, but it is slow. Easiest thing to do for IE <8 is a conditional comment at the bottom of the page to load all the images.
—
Reply to this email directly or view it on GitHub.
If it's not much more to add, then it'll be a great addition. For horiz scroll photo portfolios etc.
Sent from my iPhone
On 10 May 2014, at 23:32, Raphael Eidus notifications@github.com wrote:
that is almost exactly what the code does now.
—
Reply to this email directly or view it on GitHub.
true hehe;
On my sites I just pulled some stats and less than 1% of the users are < IE8
In my jsFiddle, you could edit the javascript part and just paste in the new Echo code for a test. (although it doesn't do the horizontal scroll test)
I've updated the jsFiddle to handle wide scrolling (horizontal). added some more cats too
Will demo this tomo, midnight here.
Sent from my iPhone
On 10 May 2014, at 23:49, Troy Morehouse notifications@github.com wrote:
I've updated the jsFiddle to handle wide scrolling (horizontal). added some more cats too
—
Reply to this email directly or view it on GitHub.
It is beer time here, hehe
@tmorehouse checkout the PR and let me know what you think. #46