CODEWITHSUNDEEP
javascripthtmlimage
Steve Kim
Steve Kim

Reputation: 5611

Best way to load lots of images without stuttering.

I have a site that I load images only when these are in slightly below the view point.

This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.

When user scrolls, and the image is just below the viewpoint, then it loads them.

It works fine on desktop. No laggy, no stutter.

However on mobile web, when I scroll, it stutters as the images are loaded.

Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.

The question that I have is that, what is the best way to load lots of images?

I am loading them only after the site is loaded, then only if they are just bit below the view point.

Do you think I should load them all to avoid stuttering especially on mobile?

I googleed smooth image loading but I don't think I am searching correct terms.

Anyway suggestions will be much appreciated.

Thank you.

Upvotes: 1

Views: 767

Answers (1)

andre mcgruder
andre mcgruder

Reputation: 1520

Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.

BLazy.js

There is a walk through example from their site.

<script src="blazy.js"></script>
<script>
    (function() {
        // Initialize
        var bLazy = new Blazy();
    })();
</script>

Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.

<img class="b-lazy" data-src="image.jpg" />

ebLazy.js – A lazyload image script

blazy.js examples

Upvotes: 2

Related Questions