图片的预加载和懒加载

最新推荐文章于 2024-10-15 14:00:48 发布

weixin_33705053

最新推荐文章于 2024-10-15 14:00:48 发布

阅读量87

点赞数

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000003072566

版权

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

预加载的实现

将图片写到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的调试工具分析网络
图片描述

在js中通过new Image对象，然后指定Image的src，通过Image的src还可以加载css、javascript

在chrome的调试工具中，可以进行测试，这样是否可以进行加载，代码如下：
图片描述
在通过chrome的调试工具中的网络分析栏，可以看到确实发送了请求，并且也得到了图片

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

返回的数据

使用ajax预加载，使用ajax的时候不仅可以加载图片，还可以加载css、javascript。

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

懒加载的实现

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

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的调试工具，然后查看网络发现这里并没有对这个图片进行加载：
图片描述
然后在点击图片，发现：

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

实际生产环境中的使用

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

后记

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

weixin_33705053

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫