Foreword
optimization! Is optimized!
The Cubs were cut plan as a link across web applications, connected to user behavior and machine performance. The 优化ultimate meaning, is to obtain an optimal balance between the two.
For a loaded image resource, even more so. Today we'll talk about the simple, common development project images load optimization mode.
Preloading
1. mask Dafa
We often use jquery, jquery in $(function){})fact, DOMContentLoadedthe event is completed callback, just completed construction of a DOM tree. Css such as downloads and page rendering in-picture and other resources are not necessarily finished. So if this time the page is rendered, the page will be very ugly.
To solve this problem, in order to improve the user experience in terms of design and behavior, we can before pictures and other important resources downloaded completely, on page plus more beautiful mask, and pop-up prompts inform the user of the resource loading is loading. Wait until Pictures completely finished loading, the mask was removed and the loading animation .
Specific implementation ideas are as follows:
After $ (function () {}) calls, plus loading animation pops up first mask is used to prompt the user for loading in
IMG elements need to pre-load the page download
var img = new Image(); img.src="xx.jpg"Pictures download is complete there will be a onload callback
img.onload = function(){...}Remove loading animation in this callback and mask
This will bring silky smooth operating experience to users no longer have to worry about users to see who is downloading does not show the full picture of the ugly death.
Our slogan is: either not to you, or give you a look at the best of
scenarios: Please use the "Present image of the first screen animation, and your butt or a UI designer extremely strong" case
2. yards Dafa
Gong Dafa code mask and have slightly different, specific implementation ideas are as follows:
First, you need to prepare pre-loaded picture two, one is a low-definition clear. For example girl_hd size of 60kb. Is another girl, size 6kb.
html page requires written pre-loaded image src tag address is the address of the low clearance
<img src="girl.jpg" class="hd-replace">Because of the low clear view of small, quickly loaded up.
After the address $ (function () {}) call, acquires page definition need to replace the img src (girl.jpg), thereby obtaining HD FIG src as a reference string concatenation (+ '_ hd.jpg') (girl_hd. jpg), then download the high-definition map
var img = new Image(); img.src=“girl_hd.jpg”Pictures download is complete there will be a onload callback
img.onload = function(){...}Callback replace the page img src, so now is the image tag on the page
<img src="girl_hd.jpg" class="hd-replace">
Our slogan is: no code to see high-definition, please see if there is a low clear code
application scenarios: Make the case "a large number of pictures the first screen, and the size is not small" in the use
Lazy loading
If you carefully read the ideas above pre-loaded, be sure to brick on my head: mask Dafa Hao, there are code Dafa Hao, this does not improve the loading speed of project ah, the last downloaded picture is not too Download Yes, lazy loading just change the user's operating experience, in fact, the loading speed of the project has not increased, but now lazy loading to say, but a real project to improve the loading speed of Oh.
What is lazy loading, in a word to explain that 图片按需加载.
We must brush microblogging, microblogging is the best example of photo wall is lazy loaded. Photo initially displayed not much, only users pull down, pull the bottom position, photo wall will be stretched, new pictures It will be loaded.
Operational thinking:
Monitor
滚动条scrollevents (of course,touchmoveevents may be)Every time an event is triggered, determine the position of the current photo wall
If the photo wall has been brushed to a certain critical point at the bottom position
Js Download picture emerging,
var img = new Image(); img.src="xx.jpg"Download the complete callback of a onload
img.onload = function(){...}Insert images have been downloaded to the download page at the completion of the callback
Of course, depending on the project, there will be a variety of lazy loading but the core is the same: 即页面初始加载的时候，只加载满足用户需求的最小数量的资源. Take photo wall, for example, might micro-blog users, there are 500 photos, when you load a page if you load 500, users will be stuck to the explosion (as has been in the background picture download state). If the page loads only the initial load of 20 pictures, other images by the user's own operation (scroll down), to be loaded on demand, would be extremely fluency major upgrade project running.
Epilogue
Although pre-loaded or lazy loading The principle is very simple, really gave me the inspiration is huge:
预加载In addition to improving the user experience of operating its core deep in fact that:对资源进行碎片化加载that preload can actually occur at any time when the user did not move the mouse for a long time, can I secretly downloaded two pictures? When a large number of users are currently no arithmetic operations, can I secretly downloaded two pictures? When the user is currently in a very streamlined login screen, I Can secretly download a few pictures he landed a successful jump to the page? Etc., etc懒加载Deep-seated core lies:按需on-demand word has been deeply into my mind now in retrospect, many, many ways that are optimized around the demand to expand..按需加载Js,按需加载图片Etc.
First, we must first ensure that the project loading speed of time, and allows users to see the page content in the shortest possible time.
Secondly, try to ensure that the degree of streamlining the current page, do not do meaningless loaded only when the user actually needs, we presented to him.
Their advantages and disadvantages that:
Preloading:
Advantages: If the advance is just great pictures, until the need to use this picture, it can open in seconds.
Cons: Pictures download time will affect the loading time of project completion, the project will affect the operation of fluency
Lazy loading is that:
Advantages: ensure that users load the project is the most streamlined, the fastest, the least downloaded resources
Cons: If a user action triggers lazy loading, we need to wait for the download to complete the resource of time and during the download resources, reduce operating fluency
After all, the optimization of the project is no silver bullet, this part of the efficient optimization method is likely to lead to another part of the inefficient projects .A copy B project may be worthless.
So we cut plan cub can do is a deep understanding of the principles of these technologies, and gain experience in the project, only a deep understanding of the pros and cons of each technology, only a deep understanding of the needs and habits of users in order for specific projects, specific scenes, were the most suitable treatment.
This article is reproduced in the 2048 ape: cut plan of self-cultivation Cubs - optimization of image loading process