Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Performance issue in lgQuery.prototype.off() #1666

Open
pweerd opened this issue Oct 16, 2024 · 0 comments
Open

Performance issue in lgQuery.prototype.off() #1666

pweerd opened this issue Oct 16, 2024 · 0 comments

Comments

@pweerd
Copy link

pweerd commented Oct 16, 2024

Description

I have a gallery with 1000 items. I noticed that the web page is getting less and less responsive (it takes seconds!) after a few page views. (on every page view I need to do a .refresh() of the gallery, since the list of photo's will be changed.

I tracked this down to a problem in lgQuery.prototype.off().
Current code is

            Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
                if (_this.isEventMatched(event, eventName)) {
                    lgQuery.eventListeners[eventName].forEach(function (listener) {
                        _this.selector.removeEventListener(eventName.split('.')[0], listener);
                    });
                    lgQuery.eventListeners[eventName] = [];   //<-----
                }
            });

I think this should be:

            Object.keys(lgQuery.eventListeners).forEach(function (eventName) {
                if (_this.isEventMatched(event, eventName)) {
                    lgQuery.eventListeners[eventName].forEach(function (listener) {
                        _this.selector.removeEventListener(eventName.split('.')[0], listener);
                    });
                    delete lgQuery.eventListeners[eventName];   //<-----
                }
            });

Also I was wondering if this should be a double keyed object. First key is the namespace, 2nd key is the eventname.
Like lgQuery.eventListeners[ns_part][name_part].
This prevents the double loop and in case of 1000 gallery items, it saves a million calls to isEventMatched()!

Steps to reproduce

Simply put 1000 items in the gallery and call lg.refresh() a few times.

JS code that you use to initialize lightGallery.

      _lg = lightGallery($elt[0], {
         mode: 'lg-fade',
         captions: false,
         lastRow: "hide",
         rowHeight: 500,
         margins: 50,
         preload: 1,
         download: true,
         selector: selector,
         slideShowInterval: 2500,
         closeOnTap: false,
         plugins: [lgVideo, lgAutoplay, lgFullscreen],   //, lgThumbnail lgZoom,, lgHash
         mobileSettings: {
            showCloseIcon: true,
            closable: true,
            controls: false,
            download: false
         }
      });

Sample HTML markup

Environment

  • All major browsers -
  • OS - Windows
  • lightGallery version - 2.7.1 (but, since the problematic code is the same in 2.8.0, the problem will be the same)

Additional context

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant