如何将背景图像加载为CSS3或jQuery中的滚动图像

Question

i具有背景图像，文件大小为4 MB作为PNG格式。网站是一个页面网站，我想放置该背景，但不知道我该怎么能。

有什么为什么会减小尺寸，以便快速加载网页，或者在CSS3中有任何办法？因此我可以将图像部分加载为向下滚动页面。

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

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

请帮助。

Answer 1

您可以检查懒负载插件，但是如果您愿意自己做，那么您可以在达到图像位置时添加CSS类来做到这一点。

要做到这一点，您可以基于解决此主题的解决方案，并执行以下操作：

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;
}

Answer 2

pls Google更多地涉及视差滚动，然后开始您的工作。还有CHK此示例链接。

jsfiddle

//code
$(this).click(function() {
            $("#nav li a").removeClass("active");
            $(this).addClass('active');
$('html, body').animate({scrollTop: targetOffset}, 1000);
return false;