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 相关文章推荐
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
Apr 27 Javascript
P3P Header解决Cookie跨域的问题
Mar 12 Javascript
js函数参数设置默认值的一种变通实现方法
May 26 Javascript
jQuery插件FusionCharts绘制的3D双柱状图效果示例【附demo源码】
Apr 20 jQuery
关于使用axios的一些心得技巧分享
Jul 02 Javascript
微信小程使用swiper组件实现图片轮播切换显示功能【附源码下载】
Dec 12 Javascript
Bootstrap模态对话框用法简单示例
Aug 31 Javascript
Vue.js中 v-model 指令的修饰符详解
Dec 03 Javascript
vue配置font-awesome5的方法步骤
Jan 27 Javascript
手把手教你 CKEDITOR 4 扩展插件制作
Jun 18 Javascript
layui对工具条进行选择性的显示方法
Sep 19 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 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获得文件扩展名三法
2006/11/25 PHP
php数组函数序列之array_push() 数组尾部添加一个或多个元素(入栈),返回新长度。
2011/11/07 PHP
分享十款最出色的PHP安全开发库中文详细介绍
2015/03/22 PHP
基于Jquery的简单图片切换效果
2011/01/06 Javascript
JQuery插件Marquee.js实现无缝滚动效果
2016/04/26 Javascript
JavaScript基础语法之js表达式
2016/06/07 Javascript
Angular.js中angular-ui-router的简单实践
2017/07/18 Javascript
解决vue2.0动态绑定图片src属性值初始化时报错的问题
2018/03/14 Javascript
Servlet3.0与纯javascript通过Ajax交互的实例详解
2018/03/18 Javascript
详解javascript中的babel到底是什么
2018/06/21 Javascript
Vue 无限滚动加载指令实现方法
2019/05/28 Javascript
vue源码nextTick使用及原理解析
2019/08/13 Javascript
jQuery实现高度灵活的表单验证功能示例【无UI】
2020/04/30 jQuery
vue中template的三种写法示例
2020/10/21 Javascript
Django中的“惰性翻译”方法的相关使用
2015/07/27 Python
基于python的Tkinter实现一个简易计算器
2015/12/31 Python
关于python的list相关知识(推荐)
2017/08/30 Python
python中的随机函数random的用法示例
2018/01/27 Python
Python制作exe文件简单流程
2019/01/24 Python
python中break、continue 、exit() 、pass终止循环的区别详解
2019/07/08 Python
python实现word文档批量转成自定义格式的excel文档的思路及实例代码
2020/02/21 Python
Python应用自动化部署工具Fabric原理及使用解析
2020/11/30 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
HTML5 canvas标签实现刮刮卡效果
2015/04/24 HTML / CSS
必须要使用游标的SQL语句有那些
2012/05/07 面试题
汽车技术服务英文求职信范文
2014/01/02 职场文书
亲子读书活动方案
2014/02/22 职场文书
幼儿教师寄语集锦
2014/04/03 职场文书
2014年教研工作总结
2014/12/06 职场文书
三下乡活动心得体会
2016/01/23 职场文书
python生成随机数、随机字符、随机字符串
2021/04/06 Python
HTML+VUE分页实现炫酷物联网大屏功能
2021/05/27 Vue.js
Python实现DBSCAN聚类算法并样例测试
2021/06/22 Python
Ajax实现三级联动效果
2021/10/05 Javascript
一篇文章带你掌握SQLite3基本用法
2022/06/14 数据库
浅谈MySql update会锁定哪些范围的数据
2022/06/25 MySQL