0

I'm working on a long scrolling website that features a number of full background hi res images. It's currently taking too long to load since all the images are loaded in parallel by default.

So before I custom write something to load first what comes first and later what comes later (this way the first scroll will load almost instantly and the user will wait for the remaining part while reading the first part :P), is there any script that will do this out of the box?

I'm thinking on some existing code that will read each img tag or background-image property/style-attribute and load the images sequentially depending on their appearance on HTML or a some extra attribute.

I prefer vanilla JS or jQuery. If I can't find it, I'll write a plugin myself, votes/encourages accepted!

Mauro
  • 3,946
  • 2
  • 27
  • 41
  • 3
    you can wrap a – dandavis Sep 09 '14 at 21:33
  • question does not show any effort/attempts. you should try to google 'lazy load images', shows several techniques – nothingisnecessary Sep 09 '14 at 21:41
  • possible duplicate of [Lazy loading images](http://stackoverflow.com/questions/5582739/lazy-loading-images) – nothingisnecessary Sep 09 '14 at 21:43
  • @dandavis I thought about the ` – Mauro Sep 09 '14 at 21:44
  • @nothingisnecessary I did googled a lot, but the term "lazy loading" never occurred to me. Also, this is not exactly lazy loading, I want the images to load sequentially, not as they should appear on the screen. I'm not looking to save server/user bandwidth, but to present the first part of the site earlier. You don't need to be rude. :) – Mauro Sep 09 '14 at 21:48
  • @Mauro: with the template tag, you wouldn't have to change your actual content markup, like you will with a js library. – dandavis Sep 09 '14 at 21:50
  • @dandavis if I get you right, this will trigger the load in two stages: 1st everything out of the ` – Mauro Sep 09 '14 at 21:55
  • 1
    @Mauro: in it's simplest form, yes. but templates can emit a fragment, and you can chop off chunks of the fragment in tiny or huge batches, in any order you see fit. – dandavis Sep 09 '14 at 21:59
  • @dandavis Also, the page is accessible through anchor hashes and I'd like to prioritize the current one. I thought maybe someone thought on all this before and put together a nice plugin I could use. – Mauro Sep 09 '14 at 22:00
  • @dandavis yup! Nice idea! – Mauro Sep 09 '14 at 22:00
  • @Mauro: i haven't seen any template-based lazy loader libraries, but one could be really nice for the reasons discussed, mainly using standard clean accessible HTML markup. thinking about it, you could probably use a – dandavis Sep 09 '14 at 22:03

2 Answers2

1

I would try using a plugin like LazyLoad: http://www.appelsiini.net/projects/lazyload

There is a threshold value that will start to load images a certain number of pixels off screen. That way as visitors start scrolling down, it'll begin loading the next few sections.

DavGarcia
  • 18,540
  • 14
  • 58
  • 96
  • Thanks for your answer. However, this is not exactly lazy loading. this is not exactly lazy loading, I want the images to load sequentially, not as they should appear on the screen. I'm not looking to save server/user bandwidth, but to present the first part of the site earlier. I'm looking to load them as they appear on the HTML or arbitrary (using a special attribute or sth). Check the conversation on the question comments. – Mauro Sep 09 '14 at 22:01
1

I created a jQuery plugin to achieve this. Check it out! It's a work in progress so you're welcome to comment and suggest! I took a lot from Lazy Load.

https://github.com/mspivak/sequencial_load

Mauro
  • 3,946
  • 2
  • 27
  • 41