每次鼠标滚动时都会加载视差背景图像,从而降低性能

时间:2019-06-24 08:01:13

标签: javascript parallax

我是Java和jQuery新手,很抱歉,如果我的问题太傻了...

这是我尝试开发的网页:

  

http://119.27.180.212/dk-error/blog.html

每次滚动鼠标滚轮时,会加载视差图像,对一个图像的请求过多会导致网页变慢。

可以在DevTools-> Network上看到请求,有时它不会重复出现该问题,刷新将看到那些“错误”请求。

我使用:

  

https://github.com/pixelcog/parallax.js/tree/v2.0.0-alpha

对于我的博客页面视差背景图片,因为它在演示页面中加载, 和自适应背景:

  

https://github.com/briangonzalez/jquery.adaptive-backgrounds.js

对于文本颜色,也在演示中。

就像在我的html中一样,script.js正在检测鼠标滚动, 我试图删除script.js中要求图像的部分,但这使标题显示效果消失了。

这里是检测鼠标滚动的滚动功能,我怀疑这是造成“加载许多图像”问题的根源。

在scripts.js第132行

//////////////// Scroll Functions
mr = (function (mr, $, window, document){
    "use strict";

    mr.scroll           = {};
    mr.scroll.listeners = [];
    mr.scroll.y         = 0;
    mr.scroll.x         = 0;

    var documentReady = function($){

        //////////////// Capture Scroll Event and fire scroll function

        addEventListener('scroll', function(evt) {
            mr.util.requestAnimationFrame.call(window, function(){
                mr.scroll.update(evt)
            });
        }, false);

    };

    mr.scroll.update = function(){

        mr.scroll.y = window.pageYOffset;
        mr.scroll.x = window.pageXOffset;

        // Loop through all mr scroll listeners
        for (var i = 0, l = mr.scroll.listeners.length; i < l; i++) {
            mr.scroll.listeners[i](event);
        }
    };

    mr.scroll.documentReady = documentReady;

    mr.components.documentReady.push(documentReady);

    return mr;

}(mr, jQuery, window, document));

我想保持视差效果和自适应背景效果,是否有机会阻止js在每次滚动移动时加载图像?

帮助!请,非常感谢!

0 个答案:

没有答案