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. 给Android Studio 设置背景图片

    初用Android Studio的我 看见这么帅的事情,肯定自己要设置试试(又可以边看女神边打代码了,想想都刺激)由于这不是AS的原始功能所以需要下载插件 先看看效果图吧: 1.下载插件 Sexy E ...

  2. 如何解决python连接数据库编码问题(python传数据到mysql乱码)'ascii' codec can't encode _mysql_exceptions.OperationalError: (1366, "Incorrect string value:?

    首先描述下问题:  在使用python计算出结果后将结果插入到mysql过程中,报如下错误.原因很好定位就是编码的问题.那么到底是编码哪里出了问题了呢? 报错如上: 排查顺序: 第一:python的编 ...

  3. MongoDB 安装教程

    前言: MongoDB是一个基于分布式文件存储的数据库.由C++旨在为WEB应用提供可扩展的高性能数据存储解决方案. 官方网站:https://www.mongodb.com/ 本次教程只针对wind ...

  4. 《Linux内核分析》第二周:操作系统是如何工作的

    杨舒雯 20135324 北京电子科技学院 杨舒雯 原创作品转载请注明出处 <Linux内核分析>MOOC课程http://mooc.study.163.com/course/USTC-1 ...

  5. 《Bandwidth-Aware Scheduling With SDN in Hadoop:A New Trend for Big Data》--2017

    Hadoop中使用SDN的带宽感知调度:大数据的一种新趋势 Abstract: 为了处理大规模的数据,提出了基于Hadoop框架的MapReduce,在Hadoop系统中,有一种叫做NP完全最小(NP ...

  6. Alpha冲刺第7天

    Alpha第7天 1.团队成员 郑西坤 031602542 (队长) 陈俊杰 031602504 陈顺兴 031602505 张胜男 031602540 廖钰萍 031602323 雷光游 03160 ...

  7. 11th 如果重新来过

    如果重新来过,我想我不会再因任何阻碍而选择中途放弃了.为了追求完美,结果做不到自己想要的程度,就备感挫败感,于是乎就求全责备,无法继续进行下去,即便你一直原地踏步,其实也就相当于是放弃了,跟不做没有什 ...

  8. django学习--2 模板

    Django 模板 在上一章节中我们使用 django.http.HttpResponse() 来输出 "Hello World!".该方式将数据与视图混合在一起,不符合 Djan ...

  9. 浅谈|WEB 服务器 -- Caddy

    浅谈|WEB 服务器 -- Caddy 2018年03月28日 12:38:00 yori_chen 阅读数:1490 标签: caddyserverwebhttps反向代理 更多 个人分类: ser ...

  10. [转贴] VIM 常用快捷键 --一直记不住

    vim 常用快捷键  原帖地址: https://www.cnblogs.com/tianyajuanke/archive/2012/04/25/2470002.html 1.vim ~/.vimrc ...