js图片预加载与延迟加载
图片预加载的机制原理:就是提前加载出图片来,给前端的服务器有一定的压力。
图片延迟加载的原理:为了缓解前端服务器的压力,延缓加载图片,符合条件的时候再加载图片,当然不符合的条件就不加载图片。
预加载的实现目的:为了实现更好的用户体验。劣势:会消耗前端服务器的性能。
延迟加载的实现目的:为了优化服务器前端的性能,减少请求次数。 实现方式:
预加载的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图片预加载与延迟加载的更多相关文章
- js图片预加载以及延迟加载
当我们需要做图片轮播的时候,如果让图片提前下载到本地,用浏览器缓存起来,我们可以用Image对象: function preLoadImg(){ var img=new Image(); img.sr ...
- js图片预加载
图片预加载有大体有几种方式 1.html标签或css加载图片. 显而易见我们使用img标签或者通过标签的background-image属性都可以实现图片的预加载.但是为了避免初次载入过多图片影响体验 ...
- js图片预加载后触发操作
为了使得图片加载完,再触发回调函数,需进行图片预加载处理 function loadImage(url, callback) { var img = new Image(); img.src = ur ...
- JS图片预加载插件
在开发H5项目中有时候会遇到要加载大量图片的情况,利用预加载技术可以提高用户浏览时的体验. 1)概念:懒加载也叫延迟加载:JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片.预加载:提前加载 ...
- js图片预加载、有序加载
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...
- js图片预加载实现!
var myImage = (function(){ var imgNode = document.createElement( 'img' ); document.body.appendChild( ...
- JS实现图片预加载无需等待
网站开发时经常需要在某个页面需要实现对大量图片的浏览;用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片 网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考 ...
- JQUERY 插件开发——LAZYLOADIMG(预加载和延迟加载图片)
开发背景 本插件开发是近期写的最后一个插件了,接下来我想把最近研究的redis最为一个系列阐述下.当然Jquery插件开发是我个人爱好,我不会停止,在将来的开发中我会继续完善,当然也会坚持写这个系列的 ...
- 外贸建站之图片预加载JS代码分享
外贸建站之图片预加载JS代码分享 function preloadimg() { setTimeout(function() { new Image().src = "images/2017 ...
随机推荐
- 校园wifi
我校师生访问本校校园WiFi(SSID为UESTC-WiFi),不受任何影响,用户名和密码均不变,可使用本校帐号加后缀@uestc.edu.cn,登录并免费使用eduroam联盟机构的WiFi(SSI ...
- Shell 自动化部署免密登录
1 .配置主机名称 参考:Linux 修改主机名 和 ip 映射关系 2 . 编写脚本 root.sh 内容 #!/bin/bash SERVERS="hadoop0 hadoop1 had ...
- Django详细流程
一.设计表结构 我们以学生管理系统为例,讲解一下Django的基本操作.首先要设计一下表的结构,这里就不多解释 班级表结构: 表名:grades 字段:班级名称 gname 成立时间 gdate 女生 ...
- 记事本:CSS
css更多的是一种用来修饰HTML的语言 CSS的三种引入方式 1.行内样式:一般不会这样写,如果想选择某一个,可以用之后内部样式中更加详细的选中方式 行内的优先级最高 <p style=&qu ...
- 设计模式一: 单例模式(Singleton)
简介 单例模式是属于创建型模式的一种(另外两种分别是结构型模式,行为型模式).是设计模式中最为简单的一种. 英文单词Singleton的数学含义是"有且仅有一个元素的集合". 从实 ...
- spring事务源码分析结合mybatis源码(一)
最近想提升,苦逼程序猿,想了想还是拿最熟悉,之前也一直想看但没看的spring源码来看吧,正好最近在弄事务这部分的东西,就看了下,同时写下随笔记录下,以备后查. spring tx源码分析 这里只分析 ...
- hiho 1098 最小生成树二·Kruscal算法 (最小生成树)
题目: 时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 随着小Hi拥有城市数目的增加,在之间所使用的Prim算法已经无法继续使用了——但是幸运的是,经过计算机的分析, ...
- 抓包工具tcpdump用法说明
tcpdump采用命令行方式对接口的数据包进行筛选抓取,其丰富特性表现在灵活的表达式上. 不带任何选项的tcpdump,默认会抓取第一个网络接口,且只有将tcpdump进程终止才会停止抓包. 例如: ...
- HTTP协议11-cookie和seesion
因为HTTP协议是无状态的,但是很多网站的功能需要先登录才能使用.这就引入了cookie. Cookie机制 服务器用HTTP头向客户端发送cookies.客户端(浏览器)解析cookies并将它们保 ...
- 【原创】大数据基础之Impala(1)简介、安装、使用
impala2.12 官方:http://impala.apache.org/ 一 简介 Apache Impala is the open source, native analytic datab ...