Optimize cache and add default folder? about jquery.lazy HOT 4 CLOSED

Hello @Daijobou !

Thanks for your improvments. I like your idea of a default_media configuration parameter. I think i will adapt this. I will even take a look to you visibility function and validate changes within thr plugin.

But i don't understand your first point. That is exactly how Lazy works. It loads everything within a new image and after load set it to backgrounds or original elements. So what is the point of your example?

from jquery.lazy.

Thanks for your fast reply. ;)

@FIRST point
Ah thats fine! I was not sure :) Lazy Load XT have not this improvment https://github.com/ressio/lazy-load-xt/blob/master/src/jquery.lazyloadxt.bg.js ;)

@last point
I have add isElementVisible() function in XT and call it here: https://github.com/ressio/lazy-load-xt/blob/master/src/jquery.lazyloadxt.js#L209 So its only load visible elements on screen and not elements hidden in a overflow div. Working fine here. ;)

from jquery.lazy.

Thank you for explaining. ;)
As mentioned before, I will implement point 2 and take a look on point 3. I had to change it a bit in "my way", but i think it is a good idea.

Thanks!

from jquery.lazy.

Hello @Daijobou

I've added your feature request of a base path to the plugin, use version 0.6.3. You will find an example an documentation of the new config parameter imageBase on the project page: http://jquery.eisbehr.de/lazy/example_base-path

I've also looked on your isElementVisible function. And yes, it workes corretly. But there are two porblems why I could not add it to Lazy.

• First because some (older) browser will not work correctly with document.elementFromPoint.
• And second, the bigger problem, it's hella slow! In a test with about 1500 Images on a page its ended up totally lagging!

So yes, your aproach is correct, it will work, but it is not useable. I think its's okay to load images in the rare condition of overflow: hidden but let the plugin works fast. Even if the images are not visible, they are lazy loaded.

If you really need this in your project, I append the function blow. Just replace them in your project. I'm sorry I'll yould not add it ...

/**
 * check if the given element is inside the current viewport or threshold
 * @access private
 * @param {object} element
 * @return {boolean}
 */
function _isInLoadableArea(element) {
    var elementBound   = element.getBoundingClientRect(),
        direction      = configuration("scrollDirection"),
        threshold      = configuration("threshold"),
        visibleOnPoint = function(x, y) {
                             return element.contains(document.elementFromPoint(x, y));
                         },
        vertical       = // check if element is in loadable area from top
                         ((_getActualHeight() + threshold) > elementBound.top) &&
                         // check if element is even in loadable are from bottom
                         (-threshold < elementBound.bottom),
        horizontal     = // check if element is in loadable area from left
                         ((_getActualWidth() + threshold) > elementBound.left) &&
                         // check if element is even in loadable area from right
                         (-threshold < elementBound.right);

    // if element is visible by viewport + threshold make a deeper visibility check
    // like for elements in overflow hidden areas
    if( (direction == "vertical" && vertical) || (direction == "horizontal" && horizontal) || (vertical && horizontal) )
        return visibleOnPoint(elementBound.left,  elementBound.top) ||
               visibleOnPoint(elementBound.right, elementBound.top) ||
               visibleOnPoint(elementBound.right, elementBound.bottom) ||
               visibleOnPoint(elementBound.left,  elementBound.bottom);

    return false;
}

from jquery.lazy.