jquery - 如何在 css3 或 jquery 中将背景图像加载为滚动

Question

我有一张背景图片，文件大小为 4+ MB(PNG 格式)。网站是一个单页网站，我想放置那个背景，但不知道该怎么做。

是否有任何原因可以减小大小以便网页加载速度更快，或者在 css3 中有什么方法吗？所以我可以加载图像部分作为向下滚动页面。

这是我想在网页中作为背景图片放置的图片链接。

访问http://tinypic.com/r/o5vyx5/8

请帮忙。

Answer 1

您可以检查 lazy load plugin , 但如果你更喜欢自己做，那么你可以通过在到达图像位置时添加一个 CSS 类来完成。

为此，您可以将解决方案基于 this topic并做类似的事情:

function isElementInViewport(el) {
    var rect = el.getBoundingClientRect();

    return (
    rect.top >= 0 && rect.left >= 0 && rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) && /*or $(window).height() */
    rect.right <= (window.innerWidth || document.documentElement.clientWidth) /*or $(window).width() */ );
}

var yourImage = $('#yourImage').get(0);

if(isElementInViewport(yourImage){
   $('#yourImage').addClass('loadImage');
}

然后在您的 CSS 中，您只需要在添加 loadImage 类时添加背景:

#yourImage{
    ...
}

#yourImage.loadImage{
    background: url(path/to/yourImage.jpg) no-repeat center;
}