Lazy Loading of projects

Wishlist Portfolio
1

So, I’ve got a few Portfolios up (testing), and when viewing the live portfolio, the words “Load More” appear after EACH project preview photo. I need this to be a lazy load - I don’t want my customers having to click “load more” just to see another project.

1 Like
2

Hi there @BWO :wave:

Thanks for adding your idea to the Wishlist!

I see that my colleagues from the Support Team have already provided a custom solution for your case. However, we agree that it would be great to have this feature in the settings.

If this idea gets more votes, we’ll try to consider it in the future updates :slightly_smiling_face:

1 Like
3

and that custom code can you share it? :face_with_peeking_eye: I would like to have it in my portfolio so my clients don’t have to click to see the other photos. :sweat:

1 Like
4

Please try to use this code in the Custom JS field on the Style tab of your widget’s settings:

(() => {
      const start = Date.now();
      const inViewport = (elem) => {
          const bb = elem.getBoundingClientRect();
          return !(bb.top > window.innerHeight || bb.bottom < 0);
      };

      const clickWhenInViewport = (elem) => {
          while (document.body.contains(elem) && inViewport(elem)) {
              elem.click();
          }
      };

      const elemsLoop = (elems) => {
          elems.forEach((elem) => {
              clickWhenInViewport(elem);
          });
      };
      
      const rafAsync = () => new Promise(resolve => requestAnimationFrame(resolve));
      const getElements = selector => document.querySelectorAll(selector);
      const checkElements = (selector) => {
          const elems = getElements(selector);
          if (!elems.length) {
              if (Date.now() - start > 15000) return Promise.reject();
              return rafAsync().then(() => checkElements(selector));
          } else {
              return Promise.resolve(elems);
          }
      };
      const addAutoClickOnLoadMore = () => {
          const selector = '.eapp-portfolio-project-list-load-more-button';
          checkElements(selector).then((elems) => {
              elemsLoop(elems);
              const handler = () => {
                  const actualElems = getElements(selector);
                  if (actualElems.length) {
                      elemsLoop(actualElems);
                  } else {
                      document.removeEventListener('scroll', handler);
                      window.removeEventListener('resize', handler);
                  }
              };
              document.addEventListener('scroll', handler);
              window.addEventListener('resize', handler);
          },
              () => { }
          );
      };
      if (document.readyState === 'loading') {
          document.addEventListener('DOMContentLoaded', addAutoClickOnLoadMore);
      } else {
          addAutoClickOnLoadMore();
      }
  })();
1 Like