web页面使用HTML的<img>元素来嵌入图片,和所有HTML元素一样,<img>元素也是可以通过脚本来操控的(设置元素的src属性,将其指向一个新的URL会导致浏览器载入并展示一张新的图片)。为了让图片缓存起来,客户端JS定义了一个API,首先利用Image()构造函数来创建一个屏幕外图片对象,之后将该对象的src属性设置 期望的URL,由于图片元素并没有添加到文档中,因此它是不可见的,但是浏览器还是会加载图片并将其缓存起来。

//需要预加载的图片路径存放在数组里
var imgsrc=[
"images/34.jpg",
"images/32.jpg",
"images/33.jpg"
];
//初始化image对象
var img = new Image();
//遍历数组的路径,预加载到客户端
for (var i = 0; i < imgsrc.length; i++){
img.src = imgsrc[i];
}

利用JS实现图片的缓存的更多相关文章

  1. 利用js将图片地址进行转义

    利用js将图片地址进行转义 在业务中经常需要将图片从后台获取,然后在前台显示.其中后台存取图片主要分为两种,一种是数据库中获取图片的地址,第二种是存取图片内容的信息.这次主要是前台代码处理第一种情况. ...

  2. 利用js实现图片展开与收缩

    1.元素居中放大: 1>除了要改变元素的宽高以外,还要改变元素的定位(left,top),如果图片放大一倍,那么位移放大宽高的一半. 2>元素必须是定位的.所以,在css中设置为浮动布局, ...

  3. 利用js使图片外层盒子的高等于适应图片的高

    JS代码如下:<script> $(window).load(function(){ var width=$(window).width(); var img_1=$(".hot ...

  4. WebApp:如何让安卓的webview缓存webapp的html、js和图片等资源

    一.开发环境     客户端:安卓+webview(vuejs)     服务器端:tomcat 8.0 二.问题     使用安卓原生+web(基于webpack+vuejs)的方式开发了一个安卓应 ...

  5. iOS利用SDWebImage图片下载缓存

    一.我们先来了解一下SDWebImage的使用: 1.导入框架,引入头文件: #import "UIImageView+WebCache.h" 也可以直接使用CocoaPods来引 ...

  6. 利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据

    利用js对象将iframe数据缓存, 实现子页面跳转后, 返回时不丢失之前填写的数据 实现描述:将数据存放在js对象中, 然后放在父页面的document对象中, 在页面刷新的时候将父页面的值取出来, ...

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

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

  8. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  9. Android异步下载图片并且缓存图片到本地

    Android异步下载图片并且缓存图片到本地 在Android开发中我们经常有这样的需求,从服务器上下载xml或者JSON类型的数据,其中包括一些图片资源,本demo模拟了这个需求,从网络上加载XML ...

随机推荐

  1. mac10.12.6系统配置clion编写CMakeLists文件运行opencv3

    按照mac10.12.6系统使用cmake安装opencv3.3.0+opencv_contrib-3.3.0下载编译安装好了文件以后,装好clion编译器,新建C++可执行工程,编写代码 opecv ...

  2. 面向 Photoshop 的英特尔® Texture Works 插件

    英特尔对 Photoshop* 进行了扩展,以通过插件充分利用最新的图像压缩方法 (BCn/DXT).该插件旨在为图形工作者提供一款获取卓越压缩结果的工具,并提高 Photoshop* 中的压缩速度. ...

  3. 阿里云ubuntu16.04安装ruby

    0x0 准备 环境:阿里云轻量服务器ubuntu16.04 目的:安装beef需要的ruby环境 更新软件 sudo apt-get update sudo apt-get upgrade sudo ...

  4. React Native 'config.h' file not found 问题、 'glog/logging.h' file not found 问题、configure: error: C compiler cannot create executables问题解决过程记录

    1.在github 上面 git clone 一个RN 项目代码,npm install (yarn)后,准备运行iOS工程,发现'config.h' file not found ,恶心!!! 百度 ...

  5. PAT甲题题解-1077. Kuchiguse (20)-找相同后缀

    #include <iostream> #include <cstdio> #include <algorithm> #include <string.h&g ...

  6. 第二阶段团队冲刺——One

    个人任务: 司宇航:处理第一次启动服务器500的问题. 季方:优化cookie第一次运行出错的问题. 王金萱:修改注册界面. 马佳慧:修改登录界面. 站立会议: 任务看板和燃尽图:

  7. webpack 学习笔记 (一)

    webpack 作为当下前端前沿最受欢迎的打包工具,作为一个前端开发人员是很有必要去了解下它的. 题外话: npm i -D 是 npm install  --save-dev的简写,是安装模块并保存 ...

  8. JAVA面对对象(二)——继承、方法的覆写

    1.继承就是基于已存在的类构造一个新类,继承已存在的类就能复用类的方法和属性,并且能够添加新的方法和属性.也就是子类和父类 2.一个父类可以拥有多个子类,一个子类只允许有一个父类 3.用extends ...

  9. 个人作业-Week 2 代码复审

    一.概要部分 1.代码能符合需求和规格说明么? 经过我自己的测试和助教的检测,他的代码符合需求和规格的说明. 2.代码设计是否有周全的考虑? 这里代码设计我们是从两个方面检查的: 对方处理控制台输入的 ...

  10. Oracle 最新版本变化 转帖

    版本更迭 http://www.sohu.com/a/163264045_505827 Oracle Database的下一个版本将是 Oracle 18. 目的 为了更快的.通过每年的版本发布将新特 ...