CODEWITHSUNDEEP
jqueryhtmlloadlazy-evaluation
Roman Müller
Roman Müller

Reputation: 43

How to cut background image for correctly lazy load?

I have a little question. How to cut background image for correctly lazy load.

I have img which have 1920px width and 5100px height. Now I`am thinking, how to cut image for fast and correct loading and how to write it.

Its my idea good or bad?

I cut my background images for stripes, which have about 500px height and i`ll create div with stripe1.png, stripe2.png etc.. and load it with threshold.

For example:

<div id="stripe1">background img stripe 1, set in CSS</div>
<div id="stripe2">background img stripe 2, set in CSS</div>
<div id="stripe3">background img stripe 3, set in CSS</div>

in CSS i`ll have

#stripe1{
    background-image: url(`image1.png`);
}
#stripe2{
    background-image: url(`image2.png`);
}

etc.. and my jQuery

$("div.stripe1").lazyload();
$("div.stripe2").lazyload({ threshold : 200 });
$("div.stripe3").lazyload({ threshold : 200 });

It`s my idea correct?

Thanks for your answers and sorry for my english

Upvotes: 2

Views: 350

Answers (1)

Aatif Farooq
Aatif Farooq

Reputation: 1846

An other solution is to save the image as jpg using progressive format with 4 to 5 scans using Adobe Photoshop.

Then this large image will be loaded like layers. First layer will not look good, second will improve the previous.

First layer will be loaded very fast. So there is no need to slice the image.

Upvotes: 1

Related Questions