0

0

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

php中文网

php中文网

发布时间:2016-05-16 17:16:17

|

1793人浏览过

|

来源于php中文网

原创

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

  当用户进入页面的时候,显示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('已经加载')   
    });

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

viable
viable

基于GPT-4的AI非结构化数据分析平台

下载

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

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

  我晕.........

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

复制代码 代码如下:

function imgloading(){
    console.log('已经加载')
}
//页面调用
js 一个关于图片onload加载的事_javascript技巧

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

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

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

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

相关文章

java速学教程(入门到精通)
java速学教程(入门到精通)

java怎么学习?java怎么入门?java在哪学?java怎么学才快?不用担心,这里为大家提供了java速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
Word 字间距调整方法汇总
Word 字间距调整方法汇总

本专题整合了Word字间距调整方法,阅读下面的文章了解更详细操作。

2

2025.12.24

任务管理器教程
任务管理器教程

本专题整合了任务管理器相关教程,阅读下面的文章了解更多详细操作。

2

2025.12.24

AppleID格式
AppleID格式

本专题整合了AppleID相关内容,阅读专题下面的文章了解更多详细教程。

0

2025.12.24

csgo视频观看入口合集
csgo视频观看入口合集

本专题整合了csgo观看入口合集,阅读下面的文章了知道更多入口地址。

29

2025.12.24

yandex外贸入口合集
yandex外贸入口合集

本专题汇总了yandex外贸入口地址,阅读下面的文章了解更多内容。

58

2025.12.24

添加脚注通用方法
添加脚注通用方法

本专题整合了添加脚注方法合集,阅读专题下面的文章了解更多内容。

1

2025.12.24

重启电脑教程汇总
重启电脑教程汇总

本专题整合了重启电脑操作教程,阅读下面的文章了解更多详细教程。

3

2025.12.24

纸张尺寸汇总
纸张尺寸汇总

本专题整合了纸张尺寸相关内容,阅读专题下面的文章了解更多内容。

5

2025.12.24

Java Spring Boot 微服务实战
Java Spring Boot 微服务实战

本专题深入讲解 Java Spring Boot 在微服务架构中的应用,内容涵盖服务注册与发现、REST API开发、配置中心、负载均衡、熔断与限流、日志与监控。通过实际项目案例(如电商订单系统),帮助开发者掌握 从单体应用迁移到高可用微服务系统的完整流程与实战能力。

1

2025.12.24

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
TypeScript 教程
TypeScript 教程

共19课时 | 1.7万人学习

AngularJS教程
AngularJS教程

共24课时 | 2万人学习

麻省理工大佬Python课程
麻省理工大佬Python课程

共34课时 | 4.8万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号