javascript 图像预装载-实现网页幻灯片放映

对于浏览器装载图像来说，只有在图像发送一个HTTP请求之后，图像才会被浏览器装载，但是如果需要在浏览器中

装载多个图片时，比如说在网页制作幻灯片时，在服务器上或许图片会浪费很多时间，且网页打开缓慢。所以需要一些

措施来解决这个问题，例如，通过本地缓存存储图像，及预装载的方法来解决这一问题。

而预装载，其实就是在HTTP请求图片之前将其缓存的一种方式。

JavaScript中有Image累，将图像URL传递给该对象的SRC之后，浏览器便会进行装载请求，并保存到cache中。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript">
var j=0;
var test= new Array(15);
for(var i=0;i<=14;i++){test[i]=i;
}
var test2=[];//将多个图像对象，进行图片的预装载
for(var i=0;i<=test.length;i++){test2[i]=new Image();test2[i].src=test[i]+'.gif';
}
function showpic(){if(j==14)j=0;else;++j;var imagestr=test2[j].src.split("/");var imagesrc=imagestr[imagestr.length-1];str="<img src='image/"+imagesrc+"'/>";div1.innerHTML=str;
}
</script></head><body οnlοad="var begin=setInterval('showpic()',1000);">
<div id="div1" align="center"></div></body>
</html>

javascript 图像预装载-实现网页幻灯片放映相关推荐

[OpenCV] 练习题实现代码使用 cv.addWeighted 函数在文件夹中创建图像的幻灯片放映，并在图像之间进行平滑过渡
1.问题背景 opencv 官方手册文档练习题练习题实现代码使用 cv.addWeighted 函数在文件夹中创建图像的幻灯片放映,并在图像之间进行平滑过渡 2.代码部分按任意键切换幻灯片 ...
html5实例异步图片加载,javascript – 你如何处理html5的画布图像加载异步？
我一直在学习html5的画布.因为图像可能需要一段时间才能加载,所以适当的技术似乎是在尝试绘制图像之前使用onload来等待图像加载.所以: var fig = document.getElement ...
JavaScript判断设备类型加载对应网页并设置两端通用事件
JavaScript如何判断设备类型加载对应网页并设置通用事件基本思路: 在网页入口添加判断逻辑,如下:首先获取当前navigator对象的userAgent,通过userAgent判断当前设备类型 ...
支持javascript的ppt软件_javascript制作幻灯片
分享10篇优秀的 jQuery 幻灯片制作教程及应用案例 jQuery 是一个非常优秀的 JavaScript 框架,使用简单灵活,同时还有许多成熟的插件可供选择,它可以帮助你在项目中加入一些非常好的 ...
Aspose.Slides for Python演示文稿指定幻灯片放映设置
Aspose.Slides for Python演示文稿指定幻灯片放映设置使您的应用程序无需使用 Microsoft PowerPoint 即可在 Python 中读取和写入 PowerPoint ...
vanilla_如何使用Vanilla JavaScript构建简单的全屏幻灯片
vanilla 在本教程中,您将学习如何使用纯JavaScript创建响应式全屏幻灯片. 要构建它,我们将经历几个不同的前端技巧. 另外,当我们将鼠标悬停在幻灯片上时,我们将更进一步,自定义光标的外观 ...
基于HTML+CSS+JavaScript “小味鲜“餐厅网页设计
基于HTML+CSS+JavaScript "小味鲜"餐厅网页设计每博一文案师父说"生活中的负能大多来于圈子里的抱怨",有时候,你不想做别人情绪的垃圾桶. ...
要求jQuery在执行某些操作之前等待所有图像加载的官方方式
在jQuery中,当您执行以下操作时: $(function() {alert("DOM is loaded, but images not necessarily all loaded&q ...
【前端学习日记】用reveal.js实现制作网页幻灯片
一.效果展示今天学习reveal.js做了一个简单的网页幻灯片,至于reveal.js是什么,可以去这里看看https://revealjs.com/. 话不多说,上图: 二.重要代码讲解 1.导入 ...

javascript 图像预装载-实现网页幻灯片放映

javascript 图像预装载-实现网页幻灯片放映相关推荐

最新文章

热门文章