Parallax фоновое изображение загружается при каждой прокрутке мыши, ухудшает производительность - PullRequest
Новая
       11

Parallax фоновое изображение загружается при каждой прокрутке мыши, ухудшает производительность

1 голос
/ 24 июня 2019

Я новичок в Javascript и jQuery, извините, если мой вопрос слишком глупый ...

это веб-страница, с которой я пытался разработать:

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

Каждый раз, когда я прокручиваю колесо мыши, изображение Parallax загружается, слишком много запросов на одно изображение вызывает замедление веб-страницы.

Может видеть запросы на DevTools -> Network, иногда это не повторяет проблему, обновление будет видеть этот запрос "error".

Я использую:

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 при каждом движении прокрутки?

Помощь! пожалуйста, большое спасибо!

...