infinite scroll without loading image

Question

I have looked everywhere to try and figure out how to use infinite scroll and not have a loading image, but I cannot find it. This is how you set it up loading text and image:

loading: {
    img: "/img/loading.gif",
    msgText: "Loading new posts..."
}

if i set msgText to '' then there will be no text, yet I cannot seem to do the same with the loading image as if I set it to a blank string, it will display the error image image.

How can I use infinite scroll with no loading image?

infinite-scroll

note that the loading image and text is incorrect syntax on that page, you can see the correct syntax here

that's an annoying little hack though...could work and I will do it if I have to, but I think it's stupid if there really is no way to not have a loading image... — Ryan Saxe, Aug 14 '13 at 00:08
Well you haven't given any information about the framework you're using. Obviously if you get a missing image error when you remove the img property then you need to edit your class/object to allow empty or no image property. — php_nub_qq, Aug 14 '13 at 00:12
I would rather not have to edit infinite scroll although I can if I have t...I provided all links to documentation, although they don't help with what I am asking as I have gone into depth searching...I was just wondering if anybody knows a quick way around it — Ryan Saxe, Aug 14 '13 at 00:14

score 9 · Answer 1 · edited May 23 '17 at 11:51

You could use a base64 encoded 1x1 pixel transparent image:

img: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///////yH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=='

This way you avoid sending lots of headers to download a tiny image.

Edit: From smallest filesize for transparent single pixel image, you could also use the shorter

img: 'data:image/gif;base64,R0lGODlhAQABAHAAACH5BAUAAAAALAAAAAABAAEAAAICRAEAOw=='

score 6 · Answer 2 · answered Feb 19 '14 at 20:30

You're looking for the msg argument, which will ignore img and msgText by the way.

loading :
{
    msg : $('PUT YOUR HTML HERE') // Accepts a jQuery object
}

Source: jquery.infinitescroll.js. Inside of function infscr_create:

// Define loading.msg
opts.loading.msg = opts.loading.msg || $('<div id="infscr-loading"><img alt="Loading..." src="' + opts.loading.img + '" /><div>' + opts.loading.msgText + '</div></div>');

score 0 · Answer 3 · answered Aug 14 '13 at 00:16

0

There is a gif inside the plugin. Either delete loadingImg : "/img/loading.gif", or replace with something blank same size.

answered Aug 14 '13 at 00:16

Ali Çarıkçıoğlu

1,304
1
12
21

infinite scroll without loading image

infinite-scroll

3 Answers3