JavaScript imitate Pinterest realize picture preload function

JavaScript imitate Pinterest realize picture preload function _javascript skill

Last Update:2017-01-19 Source: Internet

Author: User

Tags base64

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

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.

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More