js 一个关于图片onload加载的事


Posted in Javascript onNovember 10, 2013

 首先先明确一下我要的目的:

当用户进入页面的时候,显示loading 加载图标,等最大的图片加载之后再opacity 图片;

功能很简单,但是很蛋疼的是,我没完全做出来;

在做的时候,第一时间我自然想到了如下的方法:

$(function(){
    $('.banner img').load(function(){
        console.log('已经加载')    
    });
});

熟话说的好呀,自信心太膨胀,到头来打击很大了;我以为这样就可以了,然后看了一遍之后拿给老大,老大点了两下,说一直不加载出来了,loading 转转转的就是出不来,我说不应该呀,然后自己试一下,果真如此。

接着找了一下资料,发现上面说是缓存的原因,因为load加载的时候有限浏览器会因为缓存不会触发load事件;没果;我就发了一个狠招:

window.onload=function(){
    console.log('已经加载')};

嘿嘿,这样还不行,我顶你个肺了;然后自信心又彭脏了,拿给老大,老大说行,第二天,客户来电说页面不加载,一个loading一直转转转的;我无语的回答他说:应该是你们那网速太慢了。。。你在等等,过了一下他答:说这样不行,虽然出来了,但等太久了;能不能让时间稍微少一点;

无奈,我就只能各种压缩图片呀,压完之后,他还是觉得不太理想;老大说这样可以了,现在项目还只是扔在空间上,这空间本来很慢,如果他网速慢,加载的时间自然也慢了。

老大说是这样说呀,任务还是没完成啊,绞尽脑汁,偶然看到一个外国网站的轮播图jq 插件,我下下来看了一下源码,接着就诞生出了以下招数:

var oImg = $('.banner img:eq(0)');
    oImg.attr('src')+'?'+(new Date()).getTime();
    oImg.load(function(){
        console.log('已经加载')    
    });

经过测试很正常,这个意思就是,在进入页面的时候,把图片的地址加一个时间,这样每次加载的时候就不会有缓存;而且也只是加载一张图,一张加载完之后其他就不管;

经过改正,也没跟老大说就传了上去;这次我也不敢大意,就一直在测,这一测就测出不是问题的问题了;

因为页面加载的时候图片路径每次都会不同,所以每次都会去加载,消耗的时间跟第一次加载等同;那不就是说进入一次就要加载一次吗?

我晕.........

经过数十次的尝试,苦逼的我,终于找到了一个完败上面所有方法的办法 了:

function imgloading(){
    console.log('已经加载')
}
//页面调用
<img src="1.jpg" onload="imgloading();"/>

这样就可以解决掉图片缓存了,还是会触发load事件;虽然我还不是具体理解这个;不过听别人说,这还是因为页面加载的原因;

众所周知网页是从上往下加载的;当加载到img的时候,我在ready里面获取img 元素其实是取不到的;当页面继续往下加载,经过img之后,当前的img就代表加载完毕了,既然加载完毕,我想都加载了,介个load还有用吗?

而上述的方法不难看出,页面仔加载到img 的时候碰到了onload方法,它就知道了这个图片必须要加载之后才出现。

好了。。。不知道有没有同行遇到了本苦逼这样的事情,是否找到了比这个更加完美的解决方案。。如果你有更完美的办法,请一定要留言告知呀,万分感谢,我总感觉还是有更加好的方法的。。。

Javascript 相关文章推荐
用jQuery实现检测浏览器及版本的脚本代码
Jan 22 Javascript
firefox下jquery iframe刷新页面提示会导致重复之前动作
Dec 17 Javascript
如何将一个String和多个String值进行比较思路分析
Apr 22 Javascript
jQuery将所有被选中的checkbox某个属性值连接成字符串的方法
Jan 24 Javascript
JavaScript的函数式编程基础指南
Mar 19 Javascript
Bootstrap中的Panel和Table全面解析
Jun 13 Javascript
BootStrap Datetimepicker 汉化的实现代码
Feb 10 Javascript
vue.js系列中的vue-fontawesome使用
Feb 10 Javascript
javaScript产生随机数的用法小结
Apr 21 Javascript
微信小程序实现折叠展开效果
Jul 19 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
nuxt.js 在middleware(中间件)中实现路由鉴权操作
Nov 06 Javascript
javascript陷阱 一不小心你就中招了(字符运算)
Nov 10 #Javascript
全面理解面向对象的 JavaScript(来自ibm)
Nov 10 #Javascript
面向对象设计模式的核心法则
Nov 10 #Javascript
JavaScript 语言基础知识点总结(思维导图)
Nov 10 #Javascript
JS增加行复制行删除行的实现代码
Nov 09 #Javascript
javascript相等运算符与等同运算符详细介绍
Nov 09 #Javascript
js实现简单登录功能的实例代码
Nov 09 #Javascript
You might like
php 获取页面中指定内容的实现类
2014/01/23 PHP
php使用function_exists判断函数可用的方法
2014/11/19 PHP
详解laravel安装使用Passport(Api认证)
2018/07/27 PHP
JS将制定内容复制到剪切板示例代码
2014/02/11 Javascript
Jquery+Ajax+PHP+MySQL实现分类列表管理(下)
2015/10/28 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
JS实现获取剪贴板内容的方法
2016/06/21 Javascript
微信小程序  网络请求API详解
2016/10/25 Javascript
深入理解vue.js双向绑定的实现原理
2016/12/05 Javascript
Jquery实现跨域异步上传文件总结
2017/02/03 Javascript
angular 基于ng-messages的表单验证实例
2017/05/04 Javascript
Angular中实现树形结构视图实例代码
2017/05/05 Javascript
ES6学习教程之块级作用域详解
2017/10/09 Javascript
Vue中Quill富文本编辑器的使用教程
2018/09/21 Javascript
vue多级复杂列表展开/折叠及全选/分组全选实现
2018/11/05 Javascript
基于vue手写tree插件的那点事儿
2019/08/20 Javascript
Node.JS枚举统计当前文件夹和子目录下所有代码文件行数
2019/08/23 Javascript
浅谈小程序globalData的那些事儿
2019/11/01 Javascript
详解Angular cli配置过程记录
2019/11/07 Javascript
JS中类的静态方法,静态变量,实例方法,实例变量区别与用法实例分析
2020/03/14 Javascript
[02:26]DOTA2英雄米拉娜基础教程
2013/11/25 DOTA
[54:45]2018DOTA2亚洲邀请赛 4.1 小组赛 A组 Optic vs OG
2018/04/02 DOTA
[56:21]LGD vs IG 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
python实现排序算法
2014/02/14 Python
python制作一个桌面便签软件
2015/08/09 Python
python实现矩阵和array数组之间的转换
2019/11/29 Python
屏蔽Django admin界面添加按钮的操作
2020/03/11 Python
CSS3制作轮播图的一种方法
2019/11/11 HTML / CSS
美国最大的珠宝首饰网上商城:Jewelry.com
2016/07/22 全球购物
中学生演讲稿
2014/04/26 职场文书
2014乡镇党委副书记对照检查材料思想汇报
2014/10/09 职场文书
党的群众路线教育实践活动督导组工作情况汇报
2014/10/28 职场文书
刑事辩护词范文
2015/05/21 职场文书
辩论赛主持人开场白
2015/05/29 职场文书
预备党员表决心的话
2015/09/22 职场文书
干部理论学习心得体会
2016/01/21 职场文书