文章/答案/技术大牛

发布

问加载可见图像
EN

Code Review用户

提问于 2015-05-08 13:14:18

回答 2查看 1.3K关注 0票数 3

我使用这段代码只在图像可见的情况下才能加载图像。然而，它似乎是缓慢的数千个图像，即使他们没有被渲染。

function getViewportHeight() {
    if(window.innerHeight) {
        return window.innerHeight;
    }
    else if(document.body && document.body.offsetHeight) {
        return document.body.offsetHeight;
    }
    else {
        return 0;
    }
}
function inView(elem, nearThreshold) {
    var viewportHeight = getViewportHeight();
    var scrollTop = (document.documentElement.scrollTop ? document.documentElement.scrollTop : document.body.scrollTop);
    var elemTop = elem.offset().top;
    var elemHeight = elem.height();
    nearThreshold = nearThreshold || 0;
    if((scrollTop + viewportHeight + nearThreshold) > (elemTop + elemHeight)) {
        return true;
    }
    return false;
}

function loadVisibleImages() {
    jQuery('img[data-src]').each(function() {
        if(jQuery(this).is(':visible')) {
            if(inView(jQuery(this), 100)) {
                this.src = jQuery(this).attr('data-src');
            }
        }
    });
}

jQuery(window).scroll(function() {
    loadVisibleImages();
});

我使用此代码来呈现图像：

<img src="" data-src="http://placehold.it/400x400" alt="" width="400" height="400">

一切正常，但我如何优化它呢？

javascript

jquery

image

lazy

回答 2

Code Review用户

发布于 2015-05-08 15:00:03

在方法inView中，您可以重新计算每个滚动位置相同的变量：

viewportHeight, scrollTop,nearThreshold and their sum

您可以在滚动事件处理程序中计算它们一次，然后只将它们的和传递给inView。

票数 2

Code Review用户

发布于 2015-05-08 15:10:13

我并不比你更喜欢嵌套语句，我建议你不要嵌套这段代码，让它变得更干净(在我看来)。

函数loadVisibleImages() {jQuery(‘img数据源’).each(函数(){ if(jQuery(this).is(':visible')) { if(inView(jQuery(this)，100)) { this.src =jQuery(This).attr(‘data-src’；} })；}

像这样

function loadVisibleImages() {
    jQuery('img[data-src]').each(function() {
        if(jQuery(this).is(':visible') && inView(jQuery(this), 100)) {
            this.src = jQuery(this).attr('data-src');
        }
    });
}

本质上，它与您拥有的东西是相同的，只是它没有嵌套得那么深。

在您的inView函数中，您还可以消除最后的if语句，它将从以下内容中更改

如果((scrollTop+ viewportHeight + nearThreshold) > (elemTop + elemHeight)) {返回true；}返回false；

到这个

return (scrollTop + viewportHeight + nearThreshold) > (elemTop + elemHeight)

票数 2

页面原文内容由Code Review提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://codereview.stackexchange.com/questions/90150

复制

相似问题

问加载可见图像
EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载可见图像EN

回答 2

Code Review用户

Code Review用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问加载可见图像
EN