Image loading optimization methods in front-end projects

This time I will bring you the image loading optimization method in the front-end project. What are the precautions for themethod of image loading optimization in the front-end project? The following is a practical case, let's take a look.

Pictures are a very important part of the interface display effect. Picture loading is related to user experience and application performance. Common strategies for optimizing picture loading are: preloading and lazy loading.

Image preloading can improve the user experience, which is especially important for image galleries and web content with a large proportion of images

css preloading

Use css background The attribute can preload images, but not display them in the screen position. If the paths are consistent when using these images, the browser will give priority to loading the images in the cache for display, thus achieving the purpose of preloading

#preload-img{ background: url(http://example.com/image.png) no-repeat -9999px -9999px; }

But this method will affect the display of other content when the page is first loaded. You can add some js

window.onload = function () { let preload = document.createElement('div'); preload.id = 'preload'; document.body.appendChild(preload); }

Pure js preloading

Use js to instantiate the image object, and then assign the application address , this can achieve batch image preloading

window.onload = function () { let images = [ 'http://example.com/image1.png', 'http://example.com/image2.png', 'http://example.com/image3.png', ]; images.forEach((src) => { preload(src); }) }let preload = src => { let img = new Image(); img.src = src; }

Lazy loading

Lazy loading of images can relieve pressure on the server.

Before, in js

Design Mode-Agent Mode, there was a method to implement lazy loading of images through virtual proxy

let imageEle = (function(){ let node = document.createElement('img'); document.body.appendChild(node); return { setSrc:function(src){ node.src = src; } } })();//代理对象let proxy = (function(){ let img = new Image(); img.onload = function(){ imageEle.setSrc(this.src); }; return { setSrc:function(src){ img.src = src; imageEle.setSrc('loading.gif'); } } })(); proxy.setSrc('example.png');

For some content, it is very long Page, we hope that the image will be loaded when the user browses to the corresponding area. A common solution is to use the data-src attribute on the img element to replace src, and determine that the img element is dynamically assigned src when it is in the user's

visible areaProperties display corresponding images.

If it is a picture wall page, in order to avoid starting to load all the pictures, you need to set the default height for the picture

.img{ min-height: 400px; }

Set the scrolling event

let imgs = document.getElementsByTagName("img");let n = 0; //存储加载图片索引let lazyload= ()=> { let cHeight = document.documentElement.clientHeight; var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; //滚动条距离顶部高度 for (let i = n,l = imgs.length; i < l; i++) { let img = imgs[i]; if (img.offsetTop < cHeight + scrollTop) { img.src = img.src == 'loading.gif'? img.getAttribute('data-src'):img.src; n = i + 1; } } }window.onscroll = lazyload;

The scrolling event can be throttled before proceeding Optimization

The correct use of image loading can improve the user experience, ensure the display effect of the page, and at the same time relieve the pressure on the server to a certain extent. It is a part that is often involved in front-end optimization. Understand the solutions and Strategies help us make better products.

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Detailed explanation of JS inheritance

Using function throttling in JS

Use JS code to create barrage effect

The above is the detailed content of Image loading optimization methods in front-end projects. For more information, please follow other related articles on the PHP Chinese website!