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 相关文章推荐
用JS将搜索的关键字高亮显示实现代码
Nov 08 Javascript
页面图片浮动左右滑动效果的简单实现案例
Feb 10 Javascript
加随机数引入脚本不让浏览器读取缓存
Sep 04 Javascript
jQuery实现表格展开与折叠的方法
May 04 Javascript
最新最热最实用的15个jQuery插件汇总
Jul 05 Javascript
jQuery自定义数值抽奖活动代码
Jun 11 Javascript
JS弹性运动实现方法分析
Dec 15 Javascript
react系列从零开始_简单谈谈react
Jul 06 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
Jul 26 Javascript
layui 监听select选择 获取当前select的ID名称方法
Sep 24 Javascript
解决Layui数据表格显示无数据提示的问题
Nov 14 Javascript
JavaScript实现省市区三级联动
Feb 13 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加密解密函数代码
2013/06/19 PHP
php获取系统变量方法小结
2015/05/29 PHP
SSO单点登录的PHP实现方法(Laravel框架)
2016/03/23 PHP
Zend Framework框架中实现Ajax的方法示例
2017/06/27 PHP
javascript创建和存储cookie示例
2014/01/07 Javascript
浅谈javascript构造函数与实例化对象
2015/06/22 Javascript
js实现a标签超链接提交form表单的方法
2015/06/24 Javascript
js实现带农历和八字等信息的日历特效
2016/05/16 Javascript
Javascript实现图片不间断滚动的代码
2016/06/22 Javascript
关于vue.js弹窗组件的知识点总结
2016/09/11 Javascript
使用vue的v-for生成table并给table加上序号的实例代码
2017/10/27 Javascript
利用nginx + node在阿里云部署https的步骤详解
2017/12/19 Javascript
vue.js过滤器+ajax实现事件监听及后台php数据交互实例
2018/05/22 Javascript
Vue模拟数据,实现路由进入商品详情页面的示例
2018/08/31 Javascript
Vue表情输入组件 微信face表情组件
2019/02/11 Javascript
深入理解vue-class-component源码阅读
2019/02/18 Javascript
使用apifm-wxapi模块中的问题及解决方法
2019/08/05 Javascript
微信小程序弹窗禁止页面滚动的实现代码
2020/12/30 Javascript
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
简单谈谈Python中的json与pickle
2017/07/19 Python
通过python爬虫赚钱的方法
2019/01/29 Python
Python selenium根据class定位页面元素的方法
2019/02/26 Python
pycharm创建一个python包方法图解
2019/04/10 Python
django 微信网页授权认证api的步骤详解
2019/07/30 Python
python数据归一化及三种方法详解
2019/08/06 Python
python之pymysql模块简单应用示例代码
2019/12/16 Python
Python使用正则表达式实现爬虫数据抽取
2020/08/17 Python
python实现图片转字符画的完整代码
2021/02/21 Python
iphoneX 适配客户端H5页面的方法教程
2017/12/08 HTML / CSS
2014新年寄语
2014/01/20 职场文书
委托书格式
2014/08/01 职场文书
2015年社会治安综合治理工作总结
2015/04/10 职场文书
Python中相见恨晚的技巧
2021/04/13 Python
手把手教你从零开始react+antd搭建项目
2021/06/03 Javascript
健身房被搭讪?用python写了个小米计时器助人为乐
2021/06/08 Python
详解Vue的列表渲染
2021/11/20 Vue.js