the webpage loading is very slow when using some high-resolution image like 50M

Question

I design a website. In some webpage， I need to use some high-resolution images like 50M. Code is as follows:

 <ul class="demo-sample-list" >
    <li class="active">
        <img src='/static/images/0.png'>
    </li>
    <li >
        <img src='/static/images/1.png'>
    </li>
    <li >
        <img src='/static/images/2.png'>
    </li>
    ...
</ul>

but these webpage loads very slow. How to solve this problem? Can anyone give some advises?

Especially for thumbnails, those should at most be in the kB range, not MB. Best to shrink them when they are uploaded or created. — Peter B, Sep 29 '17 at 08:24

score 0 · Answer 1 · answered Sep 29 '17 at 08:10

If you really need to have that big of an image on the webpage, one option might be to load the image in with jquery or javascript, after the the dom is rendered. If the dom/page is rendered and it is only loading the image. The loading time will seen fast, even though they might need to wait for the last big image. Here is a similar question/answer on how to do this.

https://stackoverflow.com/a/5402759/6497826

so it might look something like this:

HTML:

<div id="slider">
</div>

and your script/jquery

$(document).ready(function(){
    $("#slider").append('<img src="images/slide1.jpg" alt="" />');
});

the webpage loading is very slow when using some high-resolution image like 50M

1 Answers1