Home > Article > Web Front-end > 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 the method 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.#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 preloadingUse 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 loadingLazy 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 area Properties 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 OptimizationThe 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!