During the interview, an interviewer asked me,Have you ever thought about how to optimize this plugin?And indirectly asked meFunction throttlingQuestion, hehe, update this plugin today,By the way, use the function throttle (throttle), first directly up and down the code,With parsing

 * Function function:function throttling
 * fn function to call
 * The delay function needs to delay processing time
 * mustrundelay beyond this time,Function will execute
 * * /
 var throttle=function (fn, delay, mustrundelay) {
 var timer;//Use closure to store timer
 var t_start;
 //The function returned by the closure
 return function (val) {
 var args=arguments, t_curr=+ new date ();//Use + new date () to convert a string to a number
 cleartimeout (timer);
 if (! t_start) {//use! t_start true if t_start=undefined or null
 if (t_curr-t_start>= mustrundelay) {
 fn.apply (null, args);
 } else {
 timer=settimeout (function () {
  fn.apply (null, args);
 }, delay);
 var throttle1=throttle (fn, 500, 4000);
 //Call this function inside the function that needs to be called
 throttle1 (val);//The parameter passed here is the parameter that fn needs to pass

As for the specific benefits of function throttling,Common scenarios,The following article makes it very clear,I won't say anymore ~

Many websites will use the "image lazy loading" method to optimize the website.That is to say, the image is delayed to load or meet certain conditions before it starts to load.So whim,Decided to write the "image lazy loading" plugin manually.

What are the significant advantages of using this technology?

For example, there are many pictures on a page.Such as Taobao homepage, etc.There are more than 100 pictures on a page,If so many requests are sent as soon as they come up,The page will load very long,If the js files are placed at the bottom of the document,It happens that the head of the page relies on this js file, which is not easy.The user feels that this page will be stuck.

Lazy loading principle:The browser will automatically send a request for the src attribute of the img tag in the page and download the image.This is achieved by dynamically changing the src attribute of img.

When visiting a page,First replace the background image path of the img element or other elements with the loading image address (so you only need to request it once)

Wait until a certain condition (here the page scrolls to a certain area), replace the src attribute with the value of the laze-load attribute that actually stores the img address, and then achieve "lazy loading".

//Even if the src value of img is empty, the browser will send a request to the server.So when working on projects,If img does not use src, do not show the src attribute

First three important knowledge points

1. Get screen visible window size:

document.documentelement.clientheight standard browser and lower version ie standard mode

document.body.clientheight low promiscuous mode

2. Elements are relative to the top of the document


3. Scrolling distance

document.documentelement.scrolltop compatible with standard versions of earlier versions

document.body.scrolltop is compatible with promiscuous mode;

Scroll loading:When the picture appears in the visible area,Load the picture dynamically.

Principle:When the top of the picture element is in the visible area,(The distance of the image relative to the top of the document-the scroll bar scroll)Change the src attribute of the img

Implementation principle:

1. First find out the elements that need to be lazy loaded from all related elements,Placed in the element_obj array.

function initelementmap () {
 var el=document.getelementsbytagname ("img");
 for (var j=0, len2=el.length;j<len2;j ++) {
 //Judge whether the current img has been loaded,Or with lazy_src flag [incomplete]
 if (typeof (el [j] .getattribute ("lazy_src"))) {
 element_obj.push (el [j]);
 download_count ++;

2. Determine the img objects in the array. If the conditions are met,Then change the src attribute

function lazy () {
 if (! download_count) return;
 var innerheight=getviewport ();
 for (var i=0, len=element_obj.length;i<len;i ++) {
//Get the distance from the image to the document
 var t_index=getelementviewtop (element_obj [i]);
 if (t_index-getscrolltop ()&innerheight) {
 element_obj [i] .src=element_obj [i] .getattribute ("lazy-src");
 delete element_obj [i];

3. Trigger an event when scrolling,The lazy () method is executed after 1000 milliseconds.

window.onscroll=window.onload=function () {
 settimeout (function () {
 lazy ();
 }, 1000)

The entire code is in the closure self-executing function.The corresponding method is placed in init.

var lazyload=(function () {
 function init () {
 initelementmap ();
 lazy ();
 return {
}) ();

Use format:src fill the default loading image address,The real image address is filled in the lazy-src attribute. Remember to specify the width and height.Call lazyload.init ();externally

  • Previous Very practical commands and common sense for Linux system operation and maintenance (super practical)
  • Next C # Lambda Knowledge Review