Ausführliche Erklärung des verzögerten Ladens von Bildern in Javascript

这篇文章主要介绍了Javascript之图片的延迟加载的实例详解的相关资料,这里对延迟加载和异步加载进行了详解和使用方法，需要的朋友可以参考下

Javascript之图片的延迟加载的实例详解

作用：保证页面打开的速度(3s之内打不开页面，就已经算是死亡页面了)

原理：

    1）对于首屏内容中的图片：首先给对应的区域一张默认图片占着位置(默认图片需要非常小，一般可以维持在5kb以内)，当首屏内容都加载完成后(或者也可以给一个延迟时间)，再开始加载真实图片

    2）对于其他屏中的图片：也是给一张默认的图片占位，当滚动条滚动到对应区域的时候，我们再开始加载真实的图片

    扩展：数据的异步加载：开始只把前两屏的数据加载绑定出来，后面的数据不进行处理，当页面滚动到对应区域的时候，在重新请求数据，然后绑定渲染数据

首先让img标签中的src为空，让imgdisplay:none；在外面的p上的背景图上面绑定一个背景图片，然后等页面加载完毕之后，在进行加载图片；

使用定时器或者window.onload事件，然后把获取到的url地址绑定到元素img标签上的src上；但是，如果获取的真实图片地址是错误的src地址时，不仅控制台会报错，而且页面会出现碎图/叉子图，影响视觉，以下为处理事件

 var oImg = new Image; //创建一个临时的img标签

 oImg.src = 真实的img的src地址

 oImg.onload=function(){ //-> 当图片能够正常加载

  img.src = this.src；

  img.syule.disolay = 'block'；

  oImg = null; //释放空标签

 }

网站性能优化：

1、尽量减少向服务器端请求的次数"减少HTTP请求"

2、css/js文件进行合并

3、ICON图片进行合并->雪碧图/css script

4、图片的延迟加载

5、数据的异步加载

6、在移动端，我国做的是一个简单的宣传页，尽量的把css和js写成内嵌式

Das obige ist der detaillierte Inhalt vonAusführliche Erklärung des verzögerten Ladens von Bildern in Javascript. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!