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. 机器学习英雄访谈录之 DL 实践家:Dominic Monn

    目录 机器学习英雄访谈录之 DL 实践家:Dominic Monn 正文 对我的启发 机器学习英雄访谈录之 DL 实践家:Dominic Monn Sanyam Bhutani 是 Medium 上一 ...

  2. maven util 类 添加 service

    直接关键代码: public class DictionaryUtil { // 以下的处理,是为了在工具类中自动注入service // 前提是在applicationContext.xml中,将该 ...

  3. 20181023-3 每周例行报告(添加PSP)

    此作业要求:[https://edu.cnblogs.com/campus/nenu/2018fall/homework/2100] 一.本周PSP表格 类型 任务 开始时间 结束时间 中断时间 净时 ...

  4. This is me

    This is me 爱琴棋 爱书画 也爱格物 爱跋山 爱涉水 也爱深林 This is me. 刘伯承的诗词有曰“高耸入云”,于是“李入云”便成为了我一生的标记,也造就了一个时而安静,时而疯狂的我 ...

  5. OpenFlow PacketOut消息机制

    OpenFlow PacketOut消息机制 前言 由于最近实验的进行,遇到一个比较棘手的问题,就是利用控制器主动发送packet消息的问题,期间遇到一些问题,后来在RYU群中得到群友左木的帮助成功解 ...

  6. [转帖] Kubernetes如何使用ReplicationController、Replica Set、Deployment管理Pod ----文章很好 但是还没具体操作实践 也还没记住.

    Kubernetes如何使用ReplicationController.Replica Set.Deployment管理Pod https://blog.csdn.net/yjk13703623757 ...

  7. vue 请求后台数据 (copy)

    https://www.cnblogs.com/calledspeed001/p/7094494.html var that=this get请求 that.$http.get("1.txt ...

  8. sqlserver2017安装及连接过程中发现的问题

    1.SSMS安装报错,如下图 根据搜索资料发现是防火墙的问题,关闭防火墙就行了. 2.连接用户时报错 这个是因为远程连接相关问题. 首先打开服务器远程连接: 其次点击: SqlServer配置管理器- ...

  9. bzoj1178/luogu3626 会议中心 (倍增+STL::set)

    贪心地,可以建出一棵树,每个区间对应一个点,它的父亲是它右边的.与它不相交的.右端点最小的区间. 为了方便,再加入一个[0,0]区间 于是就可以倍增来做出从某个区间开始,一直到某个右界,这之中最多能选 ...

  10. BZOJ4589 Hard Nim(快速沃尔什变换FWT)

    这是我第一道独立做出来的FWT的题目,所以写篇随笔纪念一下. (这还要纪念,我太弱了) 题目链接: BZOJ 题目大意:两人玩nim游戏(多堆石子,每次可以从其中一堆取任意多个,不能操作就输).$T$ ...