Front-end performance optimization-optimize a large number of image loading & large image loading (with lazy loading implementation scheme)

Too many or too large images loaded lead to slow page loading; too many images lead to too many requests to the server, too large images lead to too long each request, causing users to wait for a long time.

1. A large number of image loading optimization solutions

1. Separate image services and application services (think from the perspective of an architect)

For the server, pictures are always the most consuming system resources. If the picture service and the application service are placed on the same server, the application server will easily crash due to the high I/O load of the picture, so when there are a large number of pictures on the website When reading and writing operations, it is recommended to use a picture server.

Browsers have a limit on the number of concurrent requests for resources under the same domain name at the same time, generally between 2-6, and requests that exceed the limit will be blocked. Some mainstream browsers have HTTP 1.1 and HTTP 1.0 The maximum number of concurrent connections is shown in the figure

Insert picture description here

2. Picture compression scheme

We can use some third-party software to compress, the resolution will not change after compression, and the naked eye will not be distorted;
the pictures used in our project will basically be compressed and uploaded.

3. Image lazy loading

Lazy loading of images means that during the page rendering process, the images will not be loaded all at once, but will be loaded when needed. For example, when the scroll bar scrolls to a certain position, an event is triggered to load the image.
To optimize reflow, you can set placeholders first

Realization plan one


If: clientHeight+scroolTop>offsetTop, the picture enters the visible area, it is requested.

Borrow a picture: Original link
Insert picture description here


        var imgs = document.querySelectorAll('img');

        function getTop(e) {
            var T = e.offsetTop;
            while(e = e.offsetParent) {
                T += e.offsetTop;
            return T;

        function lazyLoad(imgs) {
            var H = document.documentElement.clientHeight;//获取可视区域高度
            var S = document.documentElement.scrollTop || document.body.scrollTop;
            for (var i = 0; i < imgs.length; i++) {
                if (H + S > getTop(imgs[i])) {
                    imgs[i].src = imgs[i].getAttribute('data-src');

        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发

Implementation plan two


When we scroll down, the value will become smaller and smaller, that is, the distance between the picture and the top of the visible area will also become smaller and smaller, so when == clientHeight, it means that the soil patch It's about to enter the visual area, as long as we are scrolling, the picture will enter the visual area, so we need to request resources. In other words, when<=clientHeight, the picture is in the visible area.


var imgs = document.querySelectorAll('img');

        function isIn(el) {
            var bound = el.getBoundingClientRect();
            var clientHeight = window.innerHeight;
            return <= clientHeight;
        function check() {
        function loadImg(el) {
                var source = el.dataset.src;
                el.src = source;
        window.onload = window.onscroll = function () { //onscroll()在滚动条滚动的时候触发

4. When there are many small pictures

You can use Sprite, font icons, base64, etc., which can effectively reduce the number of connections

5.http2 solves the connection limit

http2 has only one connection to a site. Each request is a stream, and each request is divided into multiple binary frames. Frames in different streams can be interleaved to achieve multiplexing. This solves the problem of connection limit

Two, the picture is too large to load optimization plan

Slow transmission and rendering

  1. If it is a photo album or the like, it can be pre-loaded. When displaying the current picture, load its previous and next pictures
  2. When loading, you can first load a thumbnail with a very high compression rate to improve user experience, click and then or after loading to view the clear image
  3. Using progressive jpeg will improve user experience.
    Reference article
    Baseline JPEG
    Insert picture description here

Progressive JPEG
Insert picture description here
storage method is different

  1. If the display area is smaller than the actual size of the picture, it can be compressed to a suitable size on the server first

Link to this article:

Guess you like