延迟加载图像时避免过大的 DOM 大小

Question

I have a problem with dom size (3,044 elements). I have a slider (Slick Slider) and images used in it causing DOM size prolem. Img tag has lazy loading, it loads background image first and then loading main image data-src.

Reference to DOM size is this image:

<img src="/assets/img/img_bg_md.png" data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp" alt="Title" class="lazyload img-responsive img-post" width="1" height="1">

Is there a way to solve that problem?

Answer 1

I'm not sure I understand what you want, but I'll try to help. You could set the already fixed image size to the image size you already know it will be. So you could put a background image of the image for it to load prettier

<style>
  .img-responsive {
    background-color: #ccc;
  }
</style>

<img 
    src="/assets/img/img_bg_md.png" 
    data-src="/uploads/images/202212/image_430x256_639c5b0a29f1f.webp"
    alt="Title" 
    class="lazyload img-responsive img-post"
    style="width: 1px;height: 1px"
/ >


<script>
    const imagens = document.querySelectorAll('.img-responsive');
    var src, resp;
    for (const imagem of imagens) {
        src = imagem.getAttribute("data-src");
        resp = src.match(/image_(\d+)x(\d+)_/);
        if(const && resp.length > 2){
            imagem.style.width = resp[1] + 'px';
            imagem.style.height = resp[2] + 'px';
        }

        imagem.onload = function() {
            imagem.parentElement.style.backgroundColor = 'transparent';
            imagem.style.width = imagem.naturalWidth + 'px';
            imagem.style.height = imagem.naturalHeight + 'px';
        }
    }
</script>

Other suggestions:

There are a few things you can try to reduce the DOM size when using lazy loading for images:

• Use a lighter version of the main image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.

• Use a placeholder image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.

• Use a smaller image as the background image. This can help reduce the size of the DOM element and also improve the loading speed of the page.

• Use responsive images. By using the srcset attribute, you can specify different sizes of the same image for different screen sizes, which can help reduce the size of the DOM element and also improve the loading speed of the page.

• Use image optimization tools. There are several tools available that can help you optimize your images, which can reduce the size of the DOM element and improve the loading speed of the page.

• Use a content delivery network (CDN). By using a CDN, you can offload the delivery of your images to a network of servers around the world, which can help reduce the size of the DOM element and improve the loading speed of the page.

It's worth noting that there is no one-size-fits-all solution to this problem, and you may need to try a combination of these approaches to find the best solution for your specific use case.