Written in the book before

Hello, I’m here to join you again. I’m Chettuzai. Remember an interview was asked if JINGdong, Taobao is to do front-end performance optimization, in this I am not afraid of you despise me, I just said some ultra-low is to do Sprite picture ah, compression pictures, compression JS, CSS, reference external files. CSS put head, JS put /body, reduce DOM manipulation and so on.

Well, yes, ALL I saw was the interviewer’s scornful look…

Nonsense not to say, after coming back to check some information and then lazy loading and preloading, the following brief introduction:

1.what ?

Lazy loading, commonly known as lazy loading, refers to the delayed loading of images in some long pages, when img appears in the user’s visible area, is a good page performance optimization method, suitable for some large e-commerce sites such as the two mentioned above.

2. According to?

  • Reduce unnecessary loading Images that do not appear in front of the user at first glance can be prevented from loading, reducing the number of HTTP requests
  • Good user experience when you go shopping on JINGdong, n pictures need to be loaded, fast network speed does not say what, slow network speed wait for you to load the day lily are cold

3.principle

SRC =” SRC “; SRC =” SRC “; SRC =” SRC “; data-url=”xxx.jpg”;

Step 2, when the page starts to scroll, we need to listen for the Scroll event. In the event callback function, we determine whether the image is in the visible area. If the image is in the visible area, then we assign the custom attribute (data-URL) to the SRC attribute of the image

Will the frequent triggering of Scroll increase the burden of the browser and cause the page to crash?

Please put a choke on his mouth.

4.throttle

In fact throttling is throttling! Save traffic (joking), I only know that it is outside your defined time interval to call the function, so that can greatly limit the user operation page frequently triggered scroll, greatly improve the browser performance, but you can rest assured that the subtle time, users will not be found.

5. Go to the code


Copy the code

<html lang=”zh-cn”>


<head>
<meta charset=”UTF-8″>
< meta name = “viewport” content = “width = device – width, initial – scale = 1.0” >
<meta http-equiv=”X-UA-Compatible” content=”ie=edge”>
<title>Document</title>
</head>


<body>

<p><img data-url=”” height=”265″ alt=””></p>





< script SRC = “https://cdn.bootcss.com/jquery/1.8.0/jquery-1.8.0.min.js” > < / script >





<script>
// call first to ensure that the image of the visible area is displayed
lazy();
function lazy() {
var imgS = Array.from($(‘img’)); // Get the page img element array
// console.log(imgS)
var imgL = $(‘img’).length; // Get the number of page IMG elements
// console.log(imgL)
var seeHeight = $(window).height(); // Get the height of the page viewable area
// console.log(seeHeight)
var scrollT = $(document).scrollTop(); // Get the page roll-out height
// console.log(scrollT)
// Start traversing the array
for (var i = 0; i < imgL; i++) {
// console.log($(imgS[i]).offset().top + ” /”)
// console.log(seeHeight + scrollT)
// If the current element appears after the viewable area
if ($(imgS[i]).offset().top < seeHeight + scrollT) {
// If the current custom URL is not empty
if ($(imgS[i]).attr(“data-url”) ! == “undefined”) {
// Assign the custom attribute address to img.src
$(imgS[i]).attr(“src”, $(imgS[i]).attr(“data-url”))
}
}
}
}


// Users frequently operate Scroll inevitably resulting in poor page performance


Function throttle(fn, delay) {// define the parameter function and delay time
var begin = new Date();
return function () {
var curtimer = new Date();
var contxt = this,
args = arguments;
If (curtimer-begin > delay) {// Interval > Defined time
fn.apply(contxt, args);
begin = curtimer;
}
}
}
$(document).scroll(throttle(lazy, 100)); // The scroll time is executed only once within 100ms
</script>
</body>


</html>

Accept your contempt.