关于Hikic.js懒加载的深度剖析

这篇文章主要讲解Hikic.js里的懒加载使用方法和探究如何实现

那么首先，我们新建一个html文件，并且写好基本结构：

<!DOCTYPE>
<html>
    <head>
        <title>关于Hikic.js懒加载的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <script src="Hikic.js"></script>
        <script>
            
        </script>
    </body>
</html>

然后我们在body里面插入许多img标签，向下面一样：

<!DOCTYPE>
<html>
    <head>
        <title>关于Hikic.js懒加载的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img src="download-1.jpg">
        <img src="download-2.jpg">
        <img src="download-3.jpg">
        <img src="download.jpg">
        <script src="Hikic.js"></script>
        <script>
            
        </script>
    </body>
</html>

我们用火狐打开看下性能：

大家可以看到，在2000ms的位置性能出现了大幅下降，接下来，我们使用Hikic.js的懒加载来加载它，代码如下：

<!DOCTYPE>
<html>
    <head>
        <title>关于Hikic.js懒加载的深度剖析</title>
        <meta charset="UTF-8">
    </head>
    <body>
        <img id="p1" height="500" width="500" style="display: block;">
        <img id="p2" height="500" width="500" style="display: block;">
        <img id="p3" height="500" width="500" style="display: block;">
        <img id="p4" height="500" width="500" style="display: block;">
        <script src="Hikic.js"></script>
        <script>
            window.onload = function(){
                _("#p1").lazyLoad("download.jpg");
                _("#p2").lazyLoad("download-1.jpg");
                _("#p3").lazyLoad("download-2.jpg");
                _("#p4").lazyLoad("download-3.jpg");
            }
        </script>
    </body>
</html>

现在我们查看一下性能：

大家可以看到，再刷新页面的瞬间，性能是有小幅度波动的，我们从查看器里面也可以看出来他现在只加载了2张图片（只有2张图片有src的属性）

当我们继续把页面往下拖时，我们记录下性能：

可以看到，这是我们加载剩余2副图片的性能消耗，对比上面没有应用懒加载的图片，性能着实提升了不少

最后，欢迎使用Hikic.js

链接：https://www.oschina.net/p/hikic

关于Hikic.js懒加载的深度剖析

猜你喜欢