图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力。

图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片。​      

预加载的实现目的:为了实现更好的用户体验。劣势:会消耗前端服务器的性能。

延迟加载的实现目的:为了优化服务器前端的性能,减少请求次数。 实现方式:

 
      1.第一种是纯粹的延迟加载,使用setTimeOut或setInterval进行加载延迟.
 
    2.第二种是条件加载,符合某些条件,或触发了某些事件才开始异步下载。
 
    3.第三种是可视区加载,即仅加载用户可以看到的区域,这个主要由监控滚动条来实现,一般会在距用户看到某图片前一定距离遍开始加载,这样能保证用户拉下时正好能看到图片。

预加载的js:

<script type="text/javascript">
var oLi=document.getElementsByTagName('li'),
oImgs =document.getElementsByTagName('img');
//把第二张也缓存了。
var oImg = new Image();
oImg.src = aImgs[0];
//把第二张图片缓存到本地
var oImg1 = new Image();
oImg1.src = aImgs[1];
for (var i =0;i< oLi.length ; i++) {
oLi[i].nIndex =i;
oLi[i].onclick = function () {
oImgs[this.nIndex].src =aImgs[this.nIndex]
// body...
}
};

</script>

js图片预加载与延迟加载的更多相关文章

  1. js图片预加载以及延迟加载

    当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...

  2. js图片预加载

    图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...

  3. js图片预加载后触发操作

    为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...

  4. JS图片预加载插件

    在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...

  5. js图片预加载、有序加载

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...

  6. js图片预加载实现!

    var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...

  7. JS实现图片预加载无需等待

    网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...

  8. JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)

    开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...

  9. 外贸建站之图片预加载JS代码分享

    外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...

随机推荐

  1. 校园wifi

    我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...

  2. Shell 自动化部署免密登录

    1 .配置主机名称 参考:Linux 修改主机名 和 ip 映射关系 2 . 编写脚本 root.sh 内容 #!/bin/bash SERVERS="hadoop0 hadoop1 had ...

  3. Django详细流程

    一.设计表结构 我们以学生管理系统为例,讲解一下Django的基本操作.首先要设计一下表的结构,这里就不多解释 班级表结构: 表名:grades 字段:班级名称 gname 成立时间 gdate 女生 ...

  4. 记事本:CSS

    css更多的是一种用来修饰HTML的语言 CSS的三种引入方式 1.行内样式:一般不会这样写,如果想选择某一个,可以用之后内部样式中更加详细的选中方式 行内的优先级最高 <p style=&qu ...

  5. 设计模式一: 单例模式(Singleton)

    简介 单例模式是属于创建型模式的一种(另外两种分别是结构型模式,行为型模式).是设计模式中最为简单的一种. 英文单词Singleton的数学含义是"有且仅有一个元素的集合". 从实 ...

  6. spring事务源码分析结合mybatis源码(一)

    最近想提升,苦逼程序猿,想了想还是拿最熟悉,之前也一直想看但没看的spring源码来看吧,正好最近在弄事务这部分的东西,就看了下,同时写下随笔记录下,以备后查. spring tx源码分析 这里只分析 ...

  7. hiho 1098 最小生成树二·Kruscal算法 (最小生成树)

    题目: 时间限制:10000ms 单点时限:1000ms 内存限制:256MB   描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了——但是幸运的是,经过计算机的分析, ...

  8. 抓包工具tcpdump用法说明

    tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...

  9. HTTP协议11-cookie和seesion

    因为HTTP协议是无状态的,但是很多网站的功能需要先登录才能使用.这就引入了cookie. Cookie机制 服务器用HTTP头向客户端发送cookies.客户端(浏览器)解析cookies并将它们保 ...

  10. 【原创】大数据基础之Impala(1)简介、安装、使用

    impala2.12 官方:http://impala.apache.org/ 一 简介 Apache Impala is the open source, native analytic datab ...