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

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

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

原理：

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

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

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

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

使用定时器或者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写成内嵌式

以上就是Javascript之图片的延迟加载的讲解，如有疑问请留言或者到本站社区交流讨论，共同进步，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    最新版的jquery.lazyload.js已不再是伪的延迟加载了 一.请按照基本使用方法说明设置 复制代码 代码如下: //载入JavaScript 文件<script src="jquery.js" type="text/javascript"></script><script src="jquery.lazyload.js" type="text/javascript"></sc

  • jquery插件lazyload.js延迟加载图片的使用方法

    如果一个网页很长并且有很多图片的话,下载图片就需要很多时间,那么就会影响整个网页的加载速度,而这款延迟加载插件,会通过你的滚动情况来加载你需要看的图片,然后它才会从后台请求下载图片,最后显示出来.通过这个插件,可以在需要显示图片的时候,才下载图片,从而可以减少服务器的压力,提高页面加载速度. Lazy Load 插件原理 修改目标img元素的src属性为orginal属性,从而中断图片的加载.检测滚动状态,然后把网页可视区域中的img的src属性还原然后加载图片,从而制造了一种缓冲加载的效果.代

  • js图片延迟加载的实现方法及思路

    大概的实现方式是:在页面的load没有触发之前,把所有的指定id的元素内的img放入到imgs中,将所有的图片的src值放入到一个新建的_src属性中,把src设置为指定的显示图片.然后,在document.body的scroll事件触发时,循环计算imgs中的img元素位置是否正好在浏览器显示框范围内,如果是,则将img元素的_src属性的值赋给src,这样图片就能显示出来.这里比较麻烦地方是,如何计算img的位置,获得元素的相对于页面的绝对位置.通常是用offsetLeft和offsetTo

  • JS实现图片延迟加载并淡入淡出效果的简单方法

    话不多说,直接看示例 首先是图片标记的写法 <img data-src="/images/image.jpg" alt=""> 需要将图片的地址放到 data-src 属性里,而src值不需要,直接将src属性去掉. CSS代码 所有具有data-src属性的图片,我们将其初始显示状态为不可见,通过透明度来调节: img { opacity: 1; transition: opacity 0.3s; } img[data-src] { opacity:

  • js图片延迟加载(Lazyload)三种实现方式

    js图片延迟加载(Lazyload)三种实现方式

    延迟加载也称为惰性加载,即在长网页中延迟加载图像. 用户滚动到它们之前,视口外的图像不会加载. 这与图像预加载相反,在长网页上使用延迟加载将使网页加载更快. 在某些情况下,它还可以帮助减少服务器负载. 延迟加载的优点: 提升用户的体验,如果图片数量较大,打开页面的时候要将将页面上所有的图片全部获取加载,很可能会出现卡顿现象,影响用户体验.因此,有选择性地请求图片,这样能明显减少了服务器的压力和流量,也能够减小浏览器的负担. 方法一 将页面上所有图片的src属性设置为loading.gif,而图片

  • Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件

    从网上下载来的版本多多少少都有些BUG,尤其是加载后在IE6和IE7下图片闪动是个大问题,在网上查了很久,也没有找到相关的解决方案.没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下. 解决思路大致是两点,一是从LazyLoad本身的滤镜参数下手,发现有一个参数在IE6和IE7是可以用的,就是show,那么在IE6和IE7下用这个特效:二是IE8以上(包

  • js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    js实现首屏延迟加载实现方法 js实现多屏单张图片延迟加载效果

    本文为大家分享了js实现延迟加载思想和首屏延迟加载的具体代码,供大家参考,具体内容如下 作用:保证页面打开的速度(3s之内如果首页打不开就已经算是死亡页面了) 原理: 1).对于首屏内容中的图片:首先给对应的区域一张默认图片占的位置(默认图需要非常的小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟的时间),我在开始加载真实的图片 2).对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载,开始只把前

  • js简单实现图片延迟加载的方法

    本文实例讲述了js简单实现图片延迟加载的方法.分享给大家供大家参考,具体如下: window.onload=window.onresize=window.onscroll=function() { showImg(); }; function getPos(obj) { var l=0; var t=0; while(obj) { l+=obj.offsetLeft; t+=obj.offsetTop; obj=obj.offsetParent; } return {left: l, top:

  • javascript实现图片延迟加载方法汇总(三种方法)

    看到一些大型网站,页面如果有很多图片的时候,当你滚动到相应的行时,当前行的图片才即时加载的,这样子的话页面在打开只加可视区域的图片,而其它隐藏的图片则不加载,一定程序上加快了页面加载的速度,对于比较长的页面来说,这个方案是比较好的.原理是这样:页面可见区域以下的图片先不加载,等到用户向下滚动到图片位置时,再进行加载.这样做的好处在哪里?--当页面有好几屏内容时,有可能用户只看前几屏的内容,这样我们就可以只加载用户需要看的图片,减少服务器向用户浏览器发送图片文件所产生的负荷,下面通过三种方法给大家

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

    Javascript之图片的延迟加载的实例详解 作用:保证页面打开的速度(3s之内打不开页面,就已经算是死亡页面了) 原理: 1)对于首屏内容中的图片:首先给对应的区域一张默认图片占着位置(默认图片需要非常小,一般可以维持在5kb以内),当首屏内容都加载完成后(或者也可以给一个延迟时间),再开始加载真实图片 2)对于其他屏中的图片:也是给一张默认的图片占位,当滚动条滚动到对应区域的时候,我们再开始加载真实的图片 扩展:数据的异步加载:开始只把前两屏的数据加载绑定出来,后面的数据不进行处理,当页面

  • HTML中使背景图片自适应浏览器大小实例详解

    HTML中使背景图片自适应浏览器大小实例详解 解决办法: 1.图片不够大,又background属性不能拉伸图片: 2.只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用<img> : 3.body的background属性去掉,要不然会被遮住. <html> <body> <div id="Layer1" style="position:absolute; left:0px; top:0p

  • 对Python+opencv将图片生成视频的实例详解

    如下所示: import cv2 fps = 16 size = (width,height) videowriter = cv2.VideoWriter("a.avi",cv2.VideoWriter_fourcc('M','J','P','G'),fps,size) for i in range(1,200): img = cv2.imread('%d'.jpg % i) videowriter.write(img) 以上这篇对Python+opencv将图片生成视频的实例详解就是

  • JavaScript复制变量三种方法实例详解

    这篇文章主要介绍了JavaScript复制变量三种方法实例详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 直接将一个变量赋给另一个变量时,系统并不会创造一个新的变量,而是将原变量的地址赋给了新变量名.举个栗子: 复制代码 复制代码 let obj = { a: 1, b: 2, }; let copy = obj; obj.a = 5; console.log(copy.a); // Result // a = 5; // 更改obj的值,

  • JavaScript设计模式之调停者模式实例详解

    JavaScript设计模式之调停者模式实例详解

    本文实例讲述了JavaScript设计模式之调停者模式.分享给大家供大家参考,具体如下: 1.定义 调停者模式包装了一系列对象相互作用的方式,使得这些对象不必相互明显作用.从而使他们可以松散偶合.当某些对象之间的作用发生改变时,不会立即影响其他的一些对象之间的作用.保证这些作用可以彼此独立的变化.调停者模式将多对多的相互作用转化为一对多的相互作用.调停者模式将对象的行为和协作抽象化,把对象在小尺度的行为上与其他对象的相互作用分开处理. 2.使用的原因 当对象之间的交互操作很多,且每个对象的行为操

  • JS实现图片轮播效果实例详解【可自动和手动】

    JS实现图片轮播效果实例详解【可自动和手动】

    本文实例讲述了JS实现图片轮播效果.分享给大家供大家参考,具体如下: 本次轮播效果图如下: 具有以下功能:1.自动播放(鼠标进入显示区域时停止播放) 2.左右焦点切换  3.底下小按钮切换 以下为实现代码: 首先是html代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>最简单的轮播效果</title&g

  • javascript原型继承工作原理和实例详解

    先为大家分享JS原型继承实例,供大家参考,具体内容如下 一.JS原型继承 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JS原型继承</title> </head> <body> <!--原型继承--> <script type="text/javascript"> //cl

  • javascript数据结构之双链表插入排序实例详解

    本文实例讲述了javascript数据结构之双链表插入排序实现方法.分享给大家供大家参考,具体如下: 数组存储前提下,插入排序算法,在最坏情况下,前面的元素需要不断向后移,以便在插入点留出空位,让目标元素插入. 换成链表时,显然无需做这种大量移动,根据每个节点的前驱节点"指针",向前找到插入点后,直接把目标值从原链表上摘下,然后在插入点把链表断成二截,然后跟目标点重新接起来即可. <!doctype html> <html> <head> <t

  • javascript性能优化之事件委托实例详解

    本文实例分析了javascript性能优化之事件委托.分享给大家供大家参考,具体如下: 为下面每个LI绑定一个click事件 <ul id="myLinks"> <li id="goSomewhere" >Go somewhere</li> <li id="doSomething" >Do something</li> <li id="sayHi" >Sa

  • JavaScript转换与解析JSON方法实例详解

    本文实例讲述了JavaScript转换与解析JSON方法.分享给大家供大家参考,具体如下: json格式数据如下: var json = { 'jquery': [{ "id": "1", "type": "ASP.NET", "title": "JSON全解析"}] } alert(json.jquery[0].id); alert(json.jquery[0].type); aler

随机推荐