Image Inside a Scrollable div Would not be Loaded

[ethonchan]

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

[macfredd]

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.