load web page progressively?

[Slapshot136]

so I have a large amount of stuff on a web page, and it takes forever to load - so I want to prioritize what gets loaded first, is there any way to see what's "in view" from a scroll box and load that first (and the other stuff last)?

 

[UndeadDragon]

Maybe something like this:

http://www.webresourcesdepot.com/load-content-while-scrolling-with-jquery/

 

[Slapshot136]

that dosen't seem like it will work for a horizontal scroll bar since it depends on the users screen reaching the bottom of the window

 

[UndeadDragon]

I didn't think about horizontal scrolling.

It might be possible to alter this part:

$(window).scroll(function(){
        if  ($(window).scrollTop() == $(document).height() - $(window).height()){
           lastPostFunc();
        }
});

My knowledge of jQuery isn't the greatest right now, so I wouldn't know if it is possible.

 

[Lyerae]

You should try to optimize everything before you resort to something like this.

 

[UndeadDragon]

You should try to optimize everything before you resort to something like this.

I do agree with this. I have never had too much of a situation where the full page takes ages to load and therefore resorted to loading things individually. If I really needed to, I would probably seperate things into pages, or tabs. However, it does depend on what this content actually is.

 

[Slapshot136]

this is for a large gallery where the thumbnails are on a horizontal scroll bar (my previous thread, which was how to get them in a horizontal scroll bar) - there isn't too much optimization that one can do when loading a ton of images, since the images are already small & compressed

 

[GetTriggerUnit-]

I think you should load your pictures apart from the page, using jquery maybe.

Try finding your scroll div's width. Then find the quantity of images and use a such formula:

padding + margin + image_width * quantity of images

If the value you find is bigger than the scroll div's width, it has loaded enough... That's how I'd see it.

 

[Slapshot136]

@ - GetTriggerUnit - that sounds like what I want, but I don't know how to do that (limited knowledge beyond html/css)

I guess I should just post the page and make it easier, it's a work in progress so don't kill me

http://annarborantiquesmarket.com/gallery.php

as it is right now, it takes forever to load (25 mb or so), the scroll bar is short in firefox and chrome, the javascript seems to be disabled in internet explorer, and there is no scroll bar on mobile devices.. all of which needs some sort of fix

 

[GetTriggerUnit-]

The first thing that I note is that you load 1000 images or so in the html itself.

I think you should select images, limit the quantity maybe...

Also, the images should be loaded with javascript, it's not going to slow the page itself that way. If I were you, I would change the way the images are displayed. Maybe you could put the images in a kind of linked list, with a prev | next button which loads the previous / next image.

 

[Lyerae]

That is a ridiculously large page. I really hope have gzip enabled.

As for optimizing it... You can probably find some sort of preload function through Google, and there is a lot that can be done towards optimizing the actual code (loading JavaScript right before </body>, for example, should force the JavaScript to load AFTER everything else [styles, content, etc.] has been loaded).

 

[tooltiperror]

>font-family: Papyrus
>2011
>mfw

please god no

 

[Slapshot136]

as I said it's a work in progress... what javascript code do I need, and does javascript even work in internet explorer by default?

 

[GetTriggerUnit-]

It should.

You probably made a little mistake that passes in other browser and not in IE.

 

[Magentix]

This is your basic AJAX situation:
- too much to load for one page
- the user should not be flooded with content

Do yourself a favour and design a nice gallery where you only show 10 pictures and perhaps preload another 20 (10 on each side)

 

[Slapshot136]

This is your basic AJAX situation:
- too much to load for one page
- the user should not be flooded with content

Do yourself a favour and design a nice gallery where you only show 10 pictures and perhaps preload another 20 (10 on each side)

I still don't know how to do that.. I don't know AJAX, what I did use there was from a linda tutorial video.. (and the code is near un-readable to me.. )

 

[Lyerae]

I still don't know how to do that.. I don't know AJAX.

Mozilla Developer Center Tutorials.
Mandatory accompanying link.