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 AnythingSlider滑动效果插件
Feb 07 Javascript
JavaScript DOM学习第一章 W3C DOM简介
Feb 19 Javascript
jQuery语法高亮插件支持各种程序源代码语法着色加亮
Apr 27 Javascript
JS实现字体选色板实例代码
Nov 20 Javascript
JavaScript程序员应该知道的45个实用技巧
Mar 04 Javascript
node.js解决获取图片真实文件类型的问题
Dec 20 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
Node.js刷新session过期时间的实现方法推荐
May 18 Javascript
Javascript中prototype的使用详解
Jun 18 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
jQuery grep()方法详解及实例代码
Oct 30 Javascript
简单了解JavaScript中常见的反模式
Jun 21 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
星际争霸教主Flash的ID由来:你永远不会知道他之前的ID是www!
2019/01/18 星际争霸
在Windows系统下使用PHP生成Word文档的教程
2015/07/03 PHP
谈谈 PHP7新增功能
2015/12/16 PHP
Yii2中YiiBase自动加载类、引用文件方法分析(autoload)
2016/07/25 PHP
Moment.js 不容错过的超棒Javascript日期处理类库
2012/04/15 Javascript
最佳6款用于移动网站开发的jQuery 图片滑块插件小结
2012/07/20 Javascript
JS操作Cookie写入和读取实例代码
2013/10/20 Javascript
jQuery之ajax删除详解
2014/02/27 Javascript
让table变成exls的示例代码
2014/03/24 Javascript
jquery实现平滑的二级下拉菜单效果
2015/08/26 Javascript
jQuery使用contains过滤器实现精确匹配方法详解
2016/02/25 Javascript
JavaScript模拟数组合并concat
2016/03/06 Javascript
jQGrid Table操作列中点击【操作】按钮弹出按钮层的实现代码
2016/12/05 Javascript
js实现颜色阶梯渐变效果(Gradient算法)
2017/03/21 Javascript
微信小程序 下拉菜单简单实例
2017/04/13 Javascript
微信小程序 按钮滑动的实现方法
2017/09/27 Javascript
element-ui 上传图片后清空图片显示的实例
2018/09/04 Javascript
vue 中使用 watch 出现了如下的报错的原因分析
2019/05/21 Javascript
[47:53]DOTA2上海特级锦标赛主赛事日 - 1 败者组第一轮#2COL VS Spirit
2016/03/02 DOTA
跟老齐学Python之坑爹的字符编码
2014/09/28 Python
Python3中简单的文件操作及两个简单小实例分享
2017/06/18 Python
python制作简单五子棋游戏
2019/06/18 Python
Django之使用celery和NGINX生成静态页面实现性能优化
2019/10/08 Python
python 实现list或string按指定分段
2019/12/25 Python
解决tensorflow打印tensor有省略号的问题
2020/02/04 Python
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
牧马人澳大利亚官网:Wrangler澳大利亚
2019/10/08 全球购物
AJax面试题
2014/11/25 面试题
幼儿园父亲节活动方案
2014/03/11 职场文书
班干部演讲稿
2014/04/24 职场文书
工作会议方案
2014/05/21 职场文书
趣味运动会策划方案
2014/06/02 职场文书
节能标语大全
2014/06/21 职场文书
2015医德医风个人工作总结
2015/04/02 职场文书
Django操作cookie的实现
2021/05/26 Python
Win11右下角图标点了没反应怎么办?Win11点击右下角图标无反应解决方法汇总
2022/07/07 数码科技