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

前几天一个项目让我头疼了很久，一个关于图片加载时的loading效果，因为不是太懂js，所以在网上各种找资料，但还是不理想，无赖苦心研究，终于有了一点眉目了，虽然个中还有一些道理不懂，至少目的达到了;

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

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

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

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

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

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

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

window.οnlοad=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" οnlοad="imgloading();"/>

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

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

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

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

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　摘自：小子不帅

转载于:https://www.cnblogs.com/CodeDeath/articles/3417003.html

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

html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介什么是图片懒加载懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
JS原生实现图片懒加载
重点集合 <div class="box"> <!-- 图片的src路径为空 lazyload="true" data-original 值为 ...
关于图片预加载loading及加载失败的相关问题
1.为什么网页需要loading 这是因为页面的加载是需要时间的,如果页面加载很快,loading的作用可能还不是特别能够体现,但是如果当页面加载速度不是很快甚至很慢的时候,页面就会出现白屏的状况,如 ...
关于图片预加载的思考
引子: 很多时候,我们在写html页面的时候,当需要在页面中加入图片时,我们很自然地把图片直接用<img>标签放在了<body>里面,这本来是没有多大问题的. 但是当图片数量很 ...
图片预加载学习(二)：有序加载之图片切换
基本效果同前一篇,业务有所变化:前一篇是先显示进度条待所有的图片加载完成了再显示图片,这一篇是先显示第一张图片然后依次加载其他图片(比较适合于有内容的图片,人在看第一张图片时程序默默的加载后面的图片) ...
PC端、移动端(手机端)图片懒加载方法整理
1.PC端图片懒加载: jquery.lazyload是一个实现图片延迟加载的jQuery 插件,它可以延迟加载长页面中的图片.在浏览器可视区域外的图片在初始状态下不会被载入,直到用户将页面滚动到它们 ...
实现图片预加载的几种方式
感觉自己好久没有写博客了,可能自己变懒了.不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西.新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看, ...
图片预加载的几种方式
在开发的过程,我们经常会遇到这样的要求,当鼠标hover上去的时候,更改菜单的背景.如果没有进行图片预加载的话,会出现闪烁.那么拥有1px的眼睛的设计师们不会放过你的.为什么会出现这张情况?因为hov ...
Vue使用图片懒加载
为什么要使用图片懒加载? 从后端获取数据时有一定的延迟,加载的时候图片会突然跳出来,图片懒加载就是在还没获取到图片数据的时候放一张动图占位,获取到数据再替换,增加用户体验. 安装 npm instal ...
微信 html自动加载js,微信小程序实现图片预加载组件
网页中的图片预加载图片预加载对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速.无缝地发布,也可帮助用户在浏览你网站内容时获得更好的用户体验.我们知道在 Web 页面中实现图片的预加载 ...

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

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

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

最新文章

热门文章