图片的预加载和懒加载

时间 2019-11-10

标签图片加载繁體版

原文原文链接

最近在作H5滑页时，遇到一些比较大的场景，动辄二10、三十页，而图片更是可恨的能达到上百个，因此就会致使场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能致使一部分的用户没有耐心，而丢失这部分用户，因而就有了这里的图片的预加载和懒加载，记个笔记，若是后边用到了，还能够来看看。
图片的预加载是提高用户体验而损失性能的一种作法，而懒加载的性能就比较好了，因此将两个结合起来放到web程序中是一种不错的选择。在用户刚进入场景的时候，先加载几页的图片，开始显示给用户，而后在用户每翻一页时，再相应的加载后面对应的一页中的图片，这样，若是用户看了几页不想看了，后边的图片就不用加载了，减轻了服务器的压力。而相应的，用户在进入场景时，等待的时间也减小了许多。javascript

预加载的实现

将图片写到css中，让图片不显示

代码：css

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>preloadByCss</title>
    <style type="text/css">
        .preloadTest {
width: 200px;
height: 200px;
border: 1px solid darkorange;
background: url("http://localhost/Public/css/images/hover.jpg");
background-size: 0;
        }
    </style>
</head>
<body>
    <div class="preloadTest">

    </div>
</body>
</html>

经过chrome的调试工具分析网络
html

在js中经过new Image对象，而后指定Image的src，经过Image的src还能够加载css、javascript

在chrome的调试工具中，能够进行测试，这样是否能够进行加载，代码以下：

在经过chrome的调试工具中的网络分析栏，能够看到确实发送了请求，而且也获得了图片

图片的加载就能够正常进行了，利用Image对象同时也能够加载css、javascript

返回的数据
java

使用ajax预加载，使用ajax的时候不只能够加载图片，还能够加载css、javascript。

关于预加载的三种方式能够查看CSDN中的文章：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-c...jquery

懒加载的实现

懒加载在一些大型的网站中见到的比较多，由于网站考虑到性能、流量及用户体验方面的问题，在用户点击开网站的首页的时候，网站想尽量的显示更多的信息给用户，又要考虑到服务器的性能的问题，还不能让用户等待的时间过长，因此这里就出现了图片的懒加载。图片的懒加载可让用户按照需求从服务器上加载图片，这样即节省了用户在代开首页时的等待时间，也节省了服务器的流量，因此是一个好的选择。懒加载的基本思路就是不给img标签写src属性，而是写到一个后边能够操做的属性中，如data-src中，而后在后边须要加载的时候，加载图片，图片地址写到src中。
以下面的这段代码：web

html<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lazyload Demo</title>
    <script type="text/javascript" src="//cdn.bootcss.com/jquery/3.0.0-alpha1/jquery.min.js"></script>
</head>
<body>


<div class="img">
    <img data-src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/logo_white_81d09391.png" alt="logo"/>
    <br/>
    <button class="showImg">
        点我显示图片
    </button>

    <script type="text/javascript">
        $(".showImg").click(function() {
            var show = $(".img > img");
            show.attr("src", show.attr("data-src"));
        });
    </script>
</div>


</body>
</html>

若是须要这个img显示的时候，直接让这个img显示，而后把这个img的data-src给src就能够完成图片的懒加载。
让代码运行，而后打开chrome的调试工具，而后查看网络发现这里并无对这个图片进行加载：

而后在点击图片，发现：

这样原理上就实现了图片的懒加载，可是在实际的生产环境中，确定不会是这么简单的，去点击一个按钮，而后让图片加载出来，大多数的应用场景都是，图片到了要显示的屏幕中了，而后在去加载，或者说再差一点就要到屏幕中，而后开始加载。ajax

实际生产环境中的使用

在实际的生产环境中考虑到本身写的预加载和懒加载的代码的性能不高等问题，这里就能够采用createJS中的preload.js和jquery.lazyload.js两个插件完成资源的预加载和懒加载。
[preload.js官网]：http://createjs.com/preloadjs
[lazyload.js官网]：http://www.appelsiini.net/projects/lazyload
用法基本上看文档就能够了，在使用的过程当中遇到的一个问题就是如何判断懒加载已经加载完成了，在网上没有找到相关的资料（请原谅我太菜），本身就稍微看了下源码，发现其中有一个load的参数，而后给它指定一个回调函数，在函数中执行加载完成要执行的代码就能够了。chrome

后记

本人的JS水平实在是太菜了，请见谅。服务器