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

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

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

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

 
      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. Codeforces Round #447 (Div. 2) B. Ralph And His Magic Field 数学

    题目链接 题意:给你三个数n,m,k;让你构造出一个nm的矩阵,矩阵元素只有两个值(1,-1),且满足每行每列的乘积为k,问你多少个矩阵. 解法:首先,如果n,m奇偶不同,且k=-1时,必然无解: 设 ...

  2. 【汇总目录】Python

    跟廖雪峰老师学Python笔记 [2019年03月29日] 匿名函数 [2019年03月25日] 返回函数与闭包 [2019年03月25日] sorted [2019年03月25日] filter [ ...

  3. django drf 基础学习3

    一 简述 这里来谈下一些基本原理 二 汇总 1 restful规范 1 根据method不同做不同的操作          request.method='          get(获取) 返回完整 ...

  4. Node.js使用jszip实现打包zip压缩包

    一.前言 最近有这样的一个需求,需要把两个同名的.mtl文件和.obj文件打包成一个同名的.zip压缩包.刚开始文件不多的时候,只有几个,或者十几个,甚至二三十个的时候,还能勉强接受手动修改,但是随着 ...

  5. css之字体的引用

    font-family 属性设置文本的字体系列. font-family 属性应该设置几个字体名称作为一种"后备"机制,如果浏览器不支持第一种字体,他将尝试下一种字体. 注意: 如 ...

  6. 006_设置执行命令提示和unset shell function

    一.unset不能unset只读变量 问题: [root@zb1-bdwaimai-inf-wfe-28 ~]# source ~/.bash_profile bash: PROMPT_COMMAND ...

  7. git命令之git remote的用法

    git remote git  remote -v git init git add xxx git commit -m 'xxx' git remote add origin ssh://softw ...

  8. Felx布局基础教程

    网页布局即layout是css的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中 ...

  9. add web server(nginx+apache)

    #!/bin/bash # # Web Server Install Script # Last Updated 2012.09.24 # ##### modify by WanJie 2012.09 ...

  10. Eclipse安装git插件以及关联导入GitHub项目

    一.Eclipse配置git 1.查看自己eclipse的版本 打开eclipse 导航: help->AboutEclipse 如图: 2.检查Eclipse中是否已安装Git插件 菜单栏He ...