Infinit scroll speed problem

help
1

hi!, i use some package to the same time, like

  1. isotope:isotope

  2. staringatlights:infinite-scroll

  3. johnantoni:meteor-unveil

on my personal page draconomicom.
but, when i drop the scroll and view few images the performan is very slow, and my computer is very fast, i don’t know how can better the experiencie, any clue?

2

Yeah, I’ve got this problem too, specifically with images. I’ve got an infinitely scrolling table, that is really fast. But when I added a 40px user avatar to each row, it really started chugging. I’m thinking it’s something to do with loading the images. One idea I’ve got is to load them with JS and insert them when they’re completed, instead of the basic HTML way, maybe that would solve it? Haven’t tested yet though.

3

I’ve build infinite scroll from scratch on my site: https://myroutes.io/routes with jquery.inview, since I’m not a fan of dumping too many packages into my project. I think you should try and build it yourself, as its just a few lines of code.

Example:

function initInview() { //Checks if the showmorebutton is in view
  $('.showMoreButton').on('inview', function(event, isInView) {
    if (isInView) {
      loadMoreShit();
    }
  });
}
1 Like
4

I’ve been experimenting with base64 for thumbs, as it has seemed to me that the bottleneck is happening more because of waiting on 20 http calls, rather than the actual image downloads, as most of the images I’m working with are <20k.

Another thing I’ve been thinking about is using a method to append <link rel="preload" as="image" href="/someImage.jpg"> for each of the “upcoming” images, so that they will be loading in the background. This would presumably get around the caching issues of b64, but I haven’t had a chance to try this yet.

5

So are you saying http calls from <img src> are blocking? That’d explain it if that’s the case…
Yeah, base64 would be pretty good for this I think, just gotta figure out how to integrate that with CollectionFS.

Also, loading via JS like this shouldn’t block right?

let img = new Image()
img.onLoad = function(){
  insert img into the document
}
img.src = 'http://example.com/image.jpg'
6

uff this is a good idea to show! is better like a math of scrolling

7

i have the same problem, but my images are very large. and slow all browser

8

i don’t use base64, i use slingshot and google bucket, in the mongoDB i have a direction of the image. and i use unveil to lazy load. but when need to add elements is slow, the element download fast. i dont see a good experience with the infinit scroll.

9

Oh, I discovered that what was actually taking time for me was the file.url() method of CollectionFS. Hmm, very strange that simply determining the url could be so expensive :thinking:

I created my own basic url function instead, and now it’s smooth again! :smile:

2 Likes