Image Inside a Scrollable div Would not be Loaded
ethonchan opened this issue · comments
When a list of images inside a scrollable div, only images at the top would be loaded. structure like below:
<ul class='photo--list' style='height: 200px;'>
<li class='photo' style='height: 100px;' id='a'>
<img data-echo='some url'/>
</li>
<li class='photo' style='height: 100px;' id='b'>
<img data-echo='some url'/>
</li>
<li class='photo' style='height: 100px;' id='c'>
<img data-echo='some url'/>
</li>
<li class='photo' style='height: 100px;' id='d'>
<img data-echo='some url'/>
</li>
<li class='photo' style='height: 100px;' id='e'>
<img data-echo='some url'/>
</li>
<li class='photo' style='height: 100px;' id='f'>
<img data-echo='some url'/>
</li>
</ul>
In this circumstance, only photo a
and photo b
would be loaded. Photo c, d, e, f
would not be loaded, for the reason that the root
variable inside Echo.js
is setted to be global
(which is window
mostly).
To solve this problem, the root
variable need to be configurable. Modification is listed below:
echo.init = function (opts) {
opts = opts || {};
// modification
root = opts.viewport || this || (0,eval)('this')
// original codes
};
ethonchan
2015-04-01
I had to add the "scroll listener" to my inner container:
myDiv.addEventListener('scroll', debounceOrThrottle, false);
I have other images in the main container, and the scroll over the root works perfectly.