This paper title: lazy loading picture (the lazyload) author: Jake release date: 2016-11-26, 18:46:34 last updated: 2016-11-28, 17:12:59 original links: i.j akeyu. Top / 2016/11/26 /… License agreement: “Attribution – Non-commercial – Same way to share 4.0”.

Meaning of lazy loading (Why lazy loading is used)

The biggest impact on page loading speed is images, a typical image can be several megabytes in size, while code may be only tens of kilobytes. When there are many images on the page, the loading speed of the page is slow. The page is not loaded within a few seconds, and many users may be lost.

Therefore, for pages with too many pictures, in order to speed up the page loading speed, we often need to not load the pictures that do not appear in the visual area of the page, and then load them after scrolling to the visual area. This will greatly improve page loading performance and improve the user experience.

The principle of

Set the img tag SRC in the page to point to a small image or leave SRC empty, and then define the data-src attribute to point to the actual image. SRC points to a default image, otherwise a request is sent to the server when SRC is empty. An address that can point to loading.

Note: The picture should specify width and height

<img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" />Copy the code

When the page is loaded, the data-src attribute value of the IMG tag in the visible area is assigned to SRC, and then the scrolling event is listened for to load the image that the user is about to see. This enables lazy loading.

code

Before writing code, you need to understand the various heights. Look at this article scrollTop, offsetTop, scrollLeft, offsetLeft

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        img {
            display: block;
            margin-bottom: 50px;
            width: 400px;
            height: 400px;
        }
    </style>
</head>

<body>

    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww1.sinaimg.cn/large/006y8mN6gw1fa7kaed2hpj30sg0l9q54.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
    <img src="default.jpg" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">

</body>Copy the code

JavaScript

<script>
    var num = document.getElementsByTagName('img').length;
    var img = document.getElementsByTagName("img");
    var n = 0; // Store the location where the image is loaded to avoid traversing from the first image every time

    lazyload(); // when the page is loaded, the image in the area is loaded

    window.onscroll = lazyload;

    function lazyload() { // Listen for page scroll events
        var seeHeight = document.documentElement.clientHeight; // Height of visible area
        var scrollTop = document.documentElement.scrollTop || document.body.scrollTop; // Height of scroll bar from top
        for (var i = n; i < num; i++) {
            if (img[i].offsetTop < seeHeight + scrollTop) {
                if (img[i].getAttribute("src") = ="default.jpg") {
                    img[i].src = img[i].getAttribute("data-src");
                }
                n = i + 1; }}} </script>Copy the code

jQuery

<script>
    var n = 0,
        imgNum = $("img").length,
        img = $('img');

    lazyload();

    $(window).scroll(lazyload);

    function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") = ="default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);

                    n = i + 1; }}}} </script>Copy the code

Use throttling functions for performance optimization

If the function is directly bound to the Scroll event, the function will be triggered at a high frequency when the page is scrolling, which will affect the performance of the browser.

I want to implement a limited trigger frequency to optimize performance.

Throttling functions: only one function is allowed to execute once in N seconds. Here is a simple throttling function:

// Simple throttling function
// Fun is the function to execute
/ / delay delay
//time The command must be executed once in time
function throttle(fun, delay, time) {
    var timeout,
        startTime = new Date(a);return function() {
        var context = this,
            args = arguments,
            curTime = new Date(a); clearTimeout(timeout);// If the specified triggering interval is reached, the handler is triggered
        if (curTime - startTime >= time) {
            fun.apply(context, args);
            startTime = curTime;
            // Reset the timer if the trigger interval is not reached
        } else{ timeout = setTimeout(fun, delay); }}; };// The handler that you actually want to bind to the Scroll event
function lazyload(event) {
        for (var i = n; i < imgNum; i++) {
            if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
                if (img.eq(i).attr("src") = ="default.jpg") {
                    var src = img.eq(i).attr("data-src");
                    img.eq(i).attr("src", src);

                    n = i + 1; }}}}// Use the throttling function
window.addEventListener('scroll',throttle(lazyload,500.1000));Copy the code