js图片预加载示例


Posted in Javascript onApril 30, 2014

js图片预加载简单示例

function loadImage(url, callback) {
    if(url!='null') {
        var img = new Image();
        img.src = url;
        if(img.complete) {
            callback(img);
        } else {
            img.onload = function(){
                img.onload = null;
                callback(img);
            } 
        }
    } 
}loadImage(pic_url,loadImage);

另一个详细详解示例

通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。
看个例子:

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
    }
//-->
</script>

当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。
如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。

稍微修改下:

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?
由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!

联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
    var Img;
    function addImg(isrc)
    {
        Img = new Image();
        //Img.src = isrc;
        Img.onload = function ()
        {
            alert("complete : "+Img.complete +"\nreadyState : "+Img.readyState)
            document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,
complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!
但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,
这和IE的 readyState 属性的表现一致!
至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?
众所周知,从缓存里加载东西的速度是很快的,那么在
Img.src = isrc;
Img.onload = ...

的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?

这回加载一张根本不存在的图片看看效果:

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
    var Imgttmt;
    function addImg(isrc)
    {
        Imgttmt = new Image();
        Imgttmt.src = isrc;
        alert("complete : "+Imgttmt.complete +"\nreadyState : "+Imgttmt.readyState)
        Imgttmt.onload = function ()
        {
            alert("impossible")
        }
    }
//-->
</script>

可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;
IE的 readyState 始终为uninitialized 。令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初
new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!如果换一张从来没有加载过的图片,
FF和Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为false, 之后为 true!

测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!
基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。

Javascript 相关文章推荐
解析DHTML,JavaScript,DOM,BOM以及WEB标准的描述
Jun 19 Javascript
JS实现简单的键盘打字的效果
Apr 24 Javascript
jquery插件uploadify实现带进度条的文件批量上传
Dec 13 Javascript
Vue2.0实现购物车功能
Jun 05 Javascript
bootstrapvalidator之API学习教程
Jun 29 Javascript
关于js中的鼠标事件总结
Jul 11 Javascript
原生JS实现小小的音乐播放器
Oct 16 Javascript
浅析Javascript中双等号(==)隐性转换机制
Oct 27 Javascript
微信小程序自定义组件实现tabs选项卡功能
Jul 14 Javascript
JavaScript实现简单的隐藏式侧边栏功能示例
Aug 31 Javascript
Js跳出两级循环方法代码实例
Sep 22 Javascript
vue项目开启Gzip压缩和性能优化操作
Oct 26 Javascript
javascript闭包入门示例
Apr 30 #Javascript
三种动态加载js的jquery实例代码另附去除js方法
Apr 30 #Javascript
js动态控制table的tr、td增加及删除的具体实现
Apr 30 #Javascript
js控制href内容的连接内容的变化示例
Apr 30 #Javascript
js函数定时器实现定时读取系统实时连接数
Apr 30 #Javascript
struts2+jquery组合验证注册用户是否存在
Apr 30 #Javascript
jquery实现的网页自动播放声音
Apr 30 #Javascript
You might like
星际争霸任务指南——虫族
2020/03/04 星际争霸
ADODB结合SMARTY使用~超级强
2006/11/25 PHP
php笔记之常用文件操作
2010/10/12 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php导入csv文件碰到乱码问题的解决方法
2014/02/10 PHP
php魔术变量用法实例详解
2014/11/13 PHP
Symfony2框架学习笔记之HTTP Cache用法详解
2016/03/18 PHP
比较完整的微信开发php代码
2016/08/02 PHP
详解PHP如何更好的利用PHPstorm的自动提示
2017/08/18 PHP
12款经典的白富美型—jquery图片轮播插件—前端开发必备
2013/01/08 Javascript
js检测输入内容全为空格的方法
2014/05/03 Javascript
jQuery弹出框代码封装DialogHelper
2015/01/30 Javascript
js控制网页背景音乐播放与停止的方法
2015/02/06 Javascript
jquery分割字符串的方法
2015/06/24 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
2016/10/31 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
jQuery实现简单复制json对象和json对象集合操作示例
2018/07/09 jQuery
浅谈Vue的响应式原理
2019/05/30 Javascript
深入解读VUE中的异步渲染的实现
2020/06/19 Javascript
Vue切换Tab动态渲染组件的操作
2020/09/21 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
Python struct.unpack
2008/09/06 Python
pygame学习笔记(4):声音控制
2015/04/15 Python
python 划分数据集为训练集和测试集的方法
2018/12/11 Python
python实现一组典型数据格式转换
2018/12/15 Python
对python中的try、except、finally 执行顺序详解
2019/02/18 Python
Pandas库之DataFrame使用的学习笔记
2019/06/21 Python
Apache部署Django项目图文详解
2019/07/30 Python
python 求10个数的平均数实例
2019/12/16 Python
python+requests接口自动化框架的实现
2020/08/31 Python
html2canvas把div保存图片高清图的方法示例
2018/03/05 HTML / CSS
美国室内和室外装饰花盆购物网站:ePlanters
2019/03/22 全球购物
优秀班主任材料
2014/12/16 职场文书
三十年同学聚会感言
2015/07/30 职场文书
MySql数据库 查询时间序列间隔
2022/05/11 MySQL