图片预加载的问题-----有针对加载和缓存的兼容解决
网站开发时经常需要在某个页面需要实现对大量图片的浏览,如果考虑流量的话,大可以像pconline一样每个页面只显示一张图片,让用户每看一张图片就需要重新下载一下整个页面。不过,在web2.0时代,更多人愿意用javascript来实现一个图片浏览器,让用户无需等待过长的时间就能看到其他图片。
知道了一张图片的地址,需要把它在一个固定大小的html容器(可以是div等)里边显示出来,最重要的当然是需要知道这张即将显示的图片的宽和高,然后再结合容器的宽和高,按照一定的缩放比例使图片显示出来。因此,实现图片预加载就成为图片浏览器的核心功能了。
做过图片翻转效果的朋友其实都知道,要让图片轮换的时候不出现等待,最好是先让图片下载到本地,让浏览器缓存起来。这时,一般都会用到js里边的Image对象。一般的手段无非这样:
function preLoadImg(url) {
var img = new Image();
img.src = url;
}
通过调用preLoadImg函数,传入图片的url,就能使图片预先下载下来了。实际上,这里用到的预下载功能也和这基本一致。图片预下载下来后,通过 img的width和height属性,就能知道图片的宽和高了。但是需要考虑到,在做图片浏览器功能时,图片都是实时显示的。比如你点了显示的按钮,这个时候才会调用上边类似的代码来加载图片。因此,如果你直接用img.width的时候,图片还没有完全下载下来。因此,需要用一些异步的方法,等到图片下载完毕的时候才会再对img的width和height进行调用。
实现这样的异步方法实际上不难,图片的下载完毕事件也很简单,就是简单的onload事件。因此,我们可以写出下面的代码:
function loadImage(url, callback) {
var img = new Image();
img.src = url;
img.onload = function(){ //图片下载完毕时异步调用callback函数。
callback.call(img); // 将callback函数this指针切换为img。
};
}
好了,再来写一个测试用例。
function imgLoaded(){
alert(this.width);
}
<input type="button" value="loadImage" οnclick="loadImage('aaa.jpg',imgLoaded)"/>
在firefox中测试一下,发现不错,果然和预想的效果一样,在图片下载后,就会弹出图片的宽度来。无论点击多少次或者刷新结果都一样。
不过,做到这一步,先别高兴太早——还需要考虑一下浏览器的兼容性,于是,赶紧到ie里边测试一下。没错,同样弹出了图片的宽度。但是,再点击load的时候,情况就不一样了,什么反应都没有了。刷新一下,也同样如此。
经过对多个浏览器版本的测试,发现ie6、opera都会这样,而firefox和safari则表现正常。其实,原因也挺简单的,就是因为浏览器的缓存了。当图片加载过一次以后,如果再有对该图片的请求时,由于浏览器已经缓存住这张图片了,不会再发起一次新的请求,而是直接从缓存中加载过来。对于 firefox和safari,它们视图使这两种加载方式对用户透明,同样会引起图片的onload事件,而ie和opera则忽略了这种同一性,不会引起图片的onload事件,因此上边的代码在它们里边不能得以实现效果。
怎么办呢?最好的情况是Image可以有一个状态值表明它是否已经载入成功了。从缓存加载的时候,因为不需要等待,这个状态值就直接是表明已经下载了,而从http请求加载时,因为需要等待下载,这个值显示为未完成。这样的话,就可以搞定了。
经过一些分析,终于发现一个为各个浏览器所兼容的Image的属性——complete。所以,在图片onload事件之前先对这个值做一下判断即可。最后,代码变成如下的样子:
function loadImage(url, callback) {
var img = new Image(); //创建一个Image对象,实现图片的预下载
img.src = url;
if (img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
callback.call(img);
return; // 直接返回,不用再处理onload事件
}
img.onload = function () { //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象
};
};
经过这么一番折腾,总算是让各个浏览器都能满足我们的目标了。虽然代码很简单,但是却把图片浏览器中最核心的问题解决掉了,接下来你所要做的,仅仅是图片如何呈现的问题了接下来看看另外一种方法:
<!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=gb2312" />
<title>js 实现图片预加载 加载完后执行动作</title>
</head>
<style type="text/css">
<!--
*html{
margin:0;
padding:0;
border:0;
}
body{border:1px solid #f3f3f3; background:#fefefe}
div#loading{
width:950px;
height:265px;
line-height:265px;
overflow:hidden;
position:relative;
text-align:center;
}
div#loading p{
position:static;
+position:absolute;
top:50%;
vertical-align:middle;
}
div#loading p img{
position:static;
+position:relative;
top:-50%;left:-50%;
vertical-align:middle
}
-->
</style>
<div id="loading">
<p><img src="http://www.baidu.com/img/baidu_logo.gif" /></p>
</div>
<script>
var i=0;
var c=3;
var imgarr=new Array
imgarr[0]="http://www.baidu.com/img/baidu_logo.gif";
imgarr[1]="http://img.baidu.com/img/logo-img.gif";
imgarr[2]="http://img.baidu.com/img/logo-zhidao.gif";
var Browser=new Object();
Browser.userAgent=window.navigator.userAgent.toLowerCase();
Browser.ie=/msie/.test(Browser.userAgent);
Browser.Moz=/gecko/.test(Browser.userAgent);
function SImage(url,callback)
{
var img = new Image();
if(Browser.ie){
img.onreadystatechange =function(){
if(img.readyState=="complete"||img.readyState=="loaded"){
ii=i+1;
callback(i);
}
}
}else if(Browser.Moz){
img.οnlοad=function(){
if(img.complete==true){
ii=i+1;
callback(i);
}
}
}
img.src=url;
}
function icall(v)
{
if(v<c){
SImage(""+imgarr[v]+"",icall);
}
else if(v>=c){
i=0;
//location.replace('banner.html');//这里写自己的动作吧,
}
}
转载于:https://www.cnblogs.com/alanaZ/p/4648581.html
图片预加载的问题-----有针对加载和缓存的兼容解决相关推荐
- uniapp swiper实现图片预览 预览一张图片加载前后两张 实现性能优化
背景: 使用uniapp框架在做h5项目时,领导要求预览图片时不能一次性加载完所有的图片,需要看一张加载一张,这样用户不费流量,优化h5的性能. 首先uniapp官网实现图片预览使用的是uni.pre ...
- 微信小程序点击图片预览真机无法显示的问题
问题: 用开发者工具开发编辑时,点击图片预览,一直显示黑屏加载转圈中- 如图所示: 实际效果图: 话不多说,直接上代码 1.html代码: <view class="img-box&q ...
- 一款Android图片预览的开源库,几乎百分百还原微信的图片预览。
图片预览组件PreviewPictureView gihub地址:https://github.com/OneZeroYang/PreviewPictureView 几乎还原微信的图片预览,核心使用共 ...
- 再谈javascript图片预加载经典技术
图片预加载技术的典型应用: 如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展 ...
- php预加载图片,图片预加载的一个简明例子
图片预加载技术的典型应用:如lightbox方式展现照片,无疑需要提前获得大图的尺寸,这样才能居中定位,由于javascript无法获取img文件头数据,必须等待其加载完毕后才能获取真实的大小然后展示 ...
- 图片预加载与图片懒加载
图片预加载与图片懒加载 图片预加载 图片预加载主要是针对非icon类图片. 加载快,有良好的用户体验. 提前加载图片,当用户需要查看时可直接从本地缓存中渲染.可能因为图片很大,浏览器显示出它会用很长的 ...
- 关于图片预加载loading及加载失败的相关问题
1.为什么网页需要loading 这是因为页面的加载是需要时间的,如果页面加载很快,loading的作用可能还不是特别能够体现,但是如果当页面加载速度不是很快甚至很慢的时候,页面就会出现白屏的状况,如 ...
- Glide实现图片预加载,提前缓存
当下很多App都有开屏广告,App打开的同时广告图片立马就显示出来了,可能有些人就有疑问了"这些广告图片是在应用打包的时候一起打包进去的吗?不然要是通过网络现加载的话怎么可能这么快,现在5G ...
- android调用h5预加载图片,图片预加载 preload
图片预加载 HTML5学堂:2014年年初的时候,曾经在自己的博客"独行冰海"里写过关于图片预加载和懒加载的博文,当时的文章当中没有写什么关于预载的代码范例,当前打算把预载和懒载分 ...
最新文章
- Java 8 Stream API详解--转
- 10 Lessons Learned Doing ICOs
- ubuntu修改pip的官方源为豆瓣源
- C++vector容器-数据存取
- ajax.call失效无请求,移动端ajax请求问题?
- 事件传递 java_将事件传递/发送到父组件?
- Kubeflow使用Kubernetes进行机器学习GPU分布式训练
- [BZOJ 2659] [Beijing wc2012] 算不出的算式
- MYSQL的安装基础语法笔记
- php 空文件夹,使用PHP删除空子文件夹
- 算法21----重塑矩阵 LeetCode566
- nginx 安全优化
- Alexa排名 介绍
- uniapp移动端实现pdf预览
- 上帝视角Hbase二级索引方案全解析
- Mockplus原型设计工具介绍
- 最小圆覆盖问题 算法步骤与证明+代码模板
- 企业微信(H5打开)调用微信小程序
- 【回答问题】ChatGPT上线了!给我推荐20个比较流行的自动驾驶算法模型
- LeetCode 13 罗马符号转化为数字(难度: Easy)
热门文章
- Android开发工具之Android Studio--如何打包sdk通过arr包的方式
- mysql 没有mysql库_MySQL安装之后没有MySQL数据库的原因
- java remote desktop_Remote Desktop
- zz 写科技论文的一点体会
- xp系统中的隐藏文件不能显示 解决方案
- CVPR 2020 HAN:《Hypergraph Attention Networks for Multimodal Learning》论文笔记
- [USACO1.1]坏掉的项链Broken Necklace
- javascript createelement_贝程学院:Selenium与 JavaScript
- python写一个表白程序_用Python写一个能算出自己年龄的小程序
- 【Jmeter自学】badboy使用(三)