Home > Developer > JavaScript
Objective
For the Pinterest website, from the front-end design, we will certainly not forget our once very popular waterfall flow layout. But today, to give you a brief analysis of the next Pinterest on the other is very worthy of reference picture loading details.
Take a look at the screenshot below:
We can feel the picture out of the time to draw the outline, the focus is the color of the prefabricated area with the picture more similar color values, when the picture loaded completely, there will be a kind of gradual effect.
Google's image search has also used a similar effect:
We call this effect Color Placeholder [color Preset], when the picture is loaded, we give preference to the background color of its container (as many will display a loaded GIF), because it is limited by different pictures and sizes, so the different color block experiences may be better than the uniform loading GIF ( At least Pinterest Google thinks so.
Implementation steps
Next we go to the point, how to achieve this animation load effect (the way to achieve certainly there are a lot of people also welcome to come up with better ideas)
Let's first define the basic HTML structure
<!--a post as a unit--> <div class= "POST" > <div class= "IMAGE-BG" style= "background-color:#" 141646 "> </div> <p class=" title ">Mars</p>
Then look at the CSS settings
. image-bg{
background: #e1e1e1;
}
img {
width:100%;
opacity:0;
transition:opacity 2s ease-in. 25s;
Loaded img {
opacity:1;
}
The picture defaults to 0 transparency, which is set to 1 when the load is complete.
$ (function () {
$ ('. Post img '). each (function () {
var el = this;
var image = new Image ();
IMAGE.SRC = EL.SRC;
Image.onload = function () {
$ (EL). Parent (). addclass (' Loaded ');}})
This is probably the basic idea, but the core of this is to determine what is called Dominant Color (the main color in the picture).
The
Complete example is as follows:
<!doctype html>
Set the color of the background
If you use Photoshop to open a picture, you only need a few steps to determine the color you want: Filter-> blur-> average.
Of course this is for you can handle the picture, if the face of a large amount of pictures, this time we need to use the program to achieve.
Looking for a picture of the more obvious color, you need to find some aggregation points in the three-dimensional space. If you write yourself, you need to know some aggregation algorithms. Of course I'm not going to write more about how to make these colors, I'm afraid it's not an article that can be finished. You can actually install ImageMagick it simply to achieve the desired effect:
But this is not very suitable for us to write programs. We can use a third partynpm gm
var gm = require (' GM ');
GM (' Demo1.png ').
resize.
colors (1)
. Tobuffer (' RGB ', function (error, buffer) {
Console.log (Buffer.slice (0, 3);
});
The results of the run output are as follows:
~ Node Gm.js ./demo1.png: <buffer 3b> ./demo2.png:
The comparison chart is as follows:
So with the help of the program, we can save the picture when the color collection, in the code by first to resize the picture, in fact, for the performance of the consideration. Helps to save computational time. In addition, embed.ly also open the corresponding API to facilitate you to get the main color of the network pictures.
If we have access to such a color, the natural overall function is no difficulty.
Extended
In fact, in addition to the pure color background, we may also encounter similar medium picture (reference above) preload technology, only to start the picture is blurred. In fact, we can generate a few small picture of a few, then use the high four blur filter, and then wait for the original image loaded, we are showing the old picture.
var gm = require (' GM ');
GM (' Demo1.png ')
. Resize (4, 4)
. Tobuffer (' GIF ', function (error, buffer) {
console.log (' data:image/gif; Base64, ' + buffer.tostring (' base64 ');
});
<div class= "IMAGE-BG" style= "Background-color: #141646" >
Summarize
The above is the entire content of this article, I hope the content of this article for everyone's study or work can bring certain help, if you have questions you can message exchange.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
