摘要：图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到程序中是一种不错的选择。
最近在做H5滑页时，遇到一些比较大的场景，动辄二十、三十页，而图片更是可恨的能达到上百个，所以就会导致场景在加载的时候遇到网速比较慢的时候，用户等待的时间特别长，这样的话，就有可能导致一部分的用户没有耐心，而丢失这部分用户，于是就有了这里的图片的预加载和懒加载，记个笔记，如果后边用到了，还可以来看看。
图片的预加载是提升用户体验而损失性能的一种做法，而懒加载的性能就比较好了，所以将两个结合起来放到web程序中是一种不错的选择。在用户刚进入场景的时候，先加载几页的图片，开始显示给用户，然后在用户每翻一页时，再相应的加载后面对应的一页中的图片，这样，如果用户看了几页不想看了，后边的图片就不用加载了，减轻了服务器的压力。而相应的，用户在进入场景时，等待的时间也减少了许多。
代码：
html
preloadByCss
通过chrome的调试工具分析网络
在chrome的调试工具中，可以进行测试，这样是否可以进行加载，代码如下：
在通过chrome的调试工具中的网络分析栏，可以看到确实发送了请求，并且也得到了图片
图片的加载就可以正常进行了，利用Image对象同时也可以加载css、javascript
返回的数据
关于预加载的三种方式可以查看CSDN中的文章：http://www.csdn.net/article/2013-10-15/2817187-3-ways-preload-images-c...
懒加载的实现懒加载在一些大型的网站中见到的比较多，因为网站考虑到性能、流量及用户体验方面的问题，在用户点击开网站的首页的时候，网站想尽可能的显示更多的信息给用户，又要考虑到服务器的性能的问题，还不能让用户等待的时间过长，所以这里就出现了图片的懒加载。图片的懒加载可以让用户按照需求从服务器上加载图片，这样即节省了用户在代开首页时的等待时间，也节省了服务器的流量，所以是一个好的选择。懒加载的基本思路就是不给img标签写src属性，而是写到一个后边可以操作的属性中，如data-src中，然后在后边需要加载的时候，加载图片，图片地址写到src中。
如下面的这段代码：
html
lazyload Demo
如果需要这个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水平实在是太菜了，请见谅。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/85884.html
摘要：教程所示图片使用的是仓库图片，网速过慢的朋友请移步原文系列教程七提取和懒加载。个人技术小站有空就来看看我一直都在本节课讲解在中的提取和懒加载。值得一提的是，和在的懒加载上的处理方法有着巨大差别。 教程所示图片使用的是 github 仓库图片，网速过慢的朋友请移步>>> （原文）webpack4 系列教程(七): SCSS 提取和懒加载。 个人技术小站: https://godbmw.c...
摘要：最近阅读了很多优秀的网站性能优化的文章，所以自己也想总结一些最近优化的手段和方法。个人感觉性能优化的核心是减少延迟，加速展现。初步以为是这个功能导致的服务挂起，询问相关操作人员，得到当时的操作过程。 最近阅读了很多优秀的网站性能优化的文章，所以自己也想总结一些最近优化的手段和方法。 个人感觉性能优化的核心是：减少延迟，加速展现。 本文主要从产品设计、前端、后端和网络四个...
摘要：本节课讲解打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过配置来实现的，而是通过的写法和内置函数实现的。个人网站原文链接系列教程四单页面解决方案代码分割和懒加载 本节课讲解webpack4打包单页应用过程中的代码分割和代码懒加载。不同于多页面应用的提取公共代码，单页面的代码分割和懒加载不是通过webpack配置来实现的，而是通过...
摘要：雪碧图内联图片将站内小图标合并成一张图，使用定位截取对应图标适当使用内联图片。浏览器缓存合理设置浏览器缓存是网页优化的重要手段之一。为什么要减少请求在性能优化中减少请求的措施占了很大部分，比如使用雪碧 这篇文章主要介绍了浅谈网页基本性能优化规则小结的相关资料，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧 针对浏览器网页的一些优化规则 页面优化 静态资源压缩...
阅读 1184·2023-04-25 19:51
阅读 1687·2019-08-30 15:55
阅读 1595·2019-08-30 15:44
阅读 2597·2019-08-30 13:58
阅读 2575·2019-08-29 16:37
阅读 951·2019-08-29 15:34
阅读 3739·2019-08-29 11:05
阅读 2487·2019-08-28 17:51
