-1

NOTE: New to this forum (UX/User Experience), so please let me know if this would be better in a different category. I searched Stack Exchange for "pinterest" and this forum seemed to have the most results. Thanks!

Hi guys. I'm writing a jQuery gist to grab links of all the images pinned to a given board in Pinterest. However, I've been running into the problem of having to repeatedly keep scrolling because all the results are not displayed on the same page. With the trendy "infinite scroll" or "lazy load" feature, one has to keep scrolling to the bottom without actually knowing if they are anywhere close because it seems to depend on your zoom percentage in your browser window and your window size as well, as to how many items display on your screen. I've been searching this for hours to no avail.

Searches I've already done keep returning non-productive results

The results I get when searching for

   "Pinterest how to disable lazy loading" and "Pinterest how to disable infinite scroll"

keep returning the opposite of what I am looking for -- incorrect results for my purposes are anything like:

 "How to add infinite scroll to my website",
 "20 Useful Pinterest Tools",
  or anything to do with adding infinite scroll.

The Problem: Infinite Scroll/Lazy Loading makes it hard for me to use browser plugins like jquerify (Chrome) and FireQuery (Firefox)

The issue for me is that I want to be able to view all my pins on a given board at once. Then I can use jQuery to manipulate all images on the page. Currently, infinite scroll makes it hard to keep track of where I'm at. I've tried stuff already by it's late at night and hard to remember everything. The important find was that in page source, Pinterest is using a "lazy" function. Here is what I found:

P.lazy = {
  onImageLoad: function(a) {
    var b = LOADED_CLASS;
    P.overlap.isOverlappingViewport(a) && (b += FADE_CLASS);
    a.className += b
  }
};

This is just starting to be a deeper rabbit hole. I've checked for plugins to "remove", "disable", or "bypass" lazy loading, but haven't found any ... only those for adding it in.

Thanks in advance for your kind assistance and Cheers.

Eric Hepperle - CodeSlayer2010
  • 3,125
  • 7
  • 33
  • 47
  • Lazy loading senses when you're near the bottom and then issues an Ajax call to load new content. So it isn't easy to disable per se. It looks like you're using jquerify or a debug console to inject js/jquery into the page. Have you tried using a loop to simply keep scrolling the page down and scraping any new images, then repeat until you're at the bottom? – tohster Feb 16 '15 at 05:03
  • @tohster Thanks for the comment! :) I could build a for or while loop if I knew what condition to look for, for sure... any ideas on what should trigger the iterations? Thanks! – Eric Hepperle - CodeSlayer2010 Feb 18 '15 at 03:41

1 Answers1

1

Pinterest loads cards via Ajax. When you scroll to the bottom of a page, browser javascript fires an Ajax call to load the next page full of cards.

This means it's not really possible to "disable" the infinite scrolling feature. A few possible approaches:

  1. Depending on how you're instantiating the browser, you might try setting or spoofing the window dimensions to a very large height. Pinterest may detect that height and attempt to load a window's worth of images, which may be enough to cover the feed you're trying to scrape.

  2. If #1 is not practical for you, you can use javascript/jquery to keep scrolling the browser down until it has finished loading all the images. There are several ways to do this, since you are injecting javascript into the browser session.
    (a) You can do this the "dumb" way with a loop that sets a timeout (setTimeout), then scrolls to the bottom (scrollTo()), then keeps going until the window stops scrolling and that comprises a kludgey auto-detect for the bottom of the page load.

(b) a more sophisticated approach would be to implement a listener for pinterest's ajax load function, (see the code, but it's a GET request to URL https://www.pinterest.com/resource/UserHomefeedResource/get/). An ajaxComplete() jQuery handler may help you detect the completion of a page load request so you can scrape the new images loaded.

Hope that helps

tohster
  • 6,463
  • 5
  • 32
  • 54
  • Thanks for these options! This is stuff I would not have even known to look for, so I really appreciate you taking the time to respond in detal! I will look into implementing and testing this solutions as soon as possible and will post results as things progress. – Eric Hepperle - CodeSlayer2010 Feb 18 '15 at 19:13
  • I spent a few hours this morning trying to refactor my code (about 60 lines) into functions, when I realized I only needed to know how to build a new window. From that information, I built this: `new_window = window.open( document.location.href, "_blank, toolbar=yes, scrollbars=no, resizable=no, top=0, left=0, width=1777, height=2324")`, which launches a new url, but the height dimensions are **not honored**. :( Looks like I'll have to research method 2, but I may not be able to get to it soon. (BTW: I toggled scrollbar and resizable to no avail) – Eric Hepperle - CodeSlayer2010 Feb 18 '15 at 21:28