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

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

　　当用户进入页面的时候，显示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方法，它就知道了这个图片必须要加载之后才出现。

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

赞 (0)

相关推荐

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

    首先先明确一下我要的目的: 当用户进入页面的时候,显示loading 加载图标,等最大的图片加载之后再opacity 图片; 功能很简单,但是很蛋疼的是,我没完全做出来: 在做的时候,第一时间我自然想到了如下的方法: 复制代码 代码如下: $(function(){    $('.banner img').load(function(){        console.log('已经加载')        });}); 熟话说的好呀,自信心太膨胀,到头来打击很大了:我以为这样就可以了,然后看了一

  • JS实现判断图片是否加载完成的方法分析

    本文实例讲述了JS实现判断图片是否加载完成的方法.分享给大家供大家参考,具体如下: 1.onload事件 <!DOCTYPE HTML> <html> <head> <title></title> </head> <body> <img src="images/background.png"> <p>loading...</p> <script type=&qu

  • js前端实现图片懒加载(lazyload)的两种方式

    在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载--到可视区域再加载. 思路: 将页面里所有img属性src属性用data-xx代替,当页面滚动直至此图片出现在可视区域时,用js取到该图片的data-xx的值赋给src. 关于各种宽高: 页可见区域宽: document.body.clien

  • js实现网页图片延时加载 提升网页打开速度

    js实现网页图片延时加载 提升网页打开速度

    提升网页加载速度的方法有很多种,用 jquery.lazyload.js 实现图片异步延迟加载,对于页面包含图片较多的网站来说,会是个不错的提升网页打开速度的方法.代码君网站栏目页列表左侧,在PC端预览时能看到一个文章略缩图展示模块,一定程度上会延长网页加载时间.本文采用图片异步延迟加载的方法,来提升本站页面加载速度. 图片异步加载,就是不必一次性把页面的所有图片都加载显示出来,等用户滑动滚动条到某个位置时才会加载显示相应位置的图片,这样能很好地提升网页加载速度,进一步提升用户体验. 有很多技术

  • 记录一个van-list不断onLoad加载的坑及解决

    目录 van-list不断onLoad加载的坑 我这里出现不断加载的原因是 van-list列表下拉加载更多onLoad事件 重点总结 van-list不断onLoad加载的坑 van-list 下拉的时候,不断请求后台加载数据,真的是坑.... this.$http.post(url, params).then(function (res) {  this.list = []; if (res.data.data.length == 0) {     that.finished = true

  • js判断背景图片是否加载成功使用img的width实现

    非背景图片可以用img的onerror 来判断,但是背景图片呢,刚无意中发现一个方法,目测可行,但不确定是否始终可行. 复制代码 代码如下: var img=new Image(); img.src="图片地址"; if(img.width==0){//表示图片加载失败了} else{//成功了} 这方法一般情况下可行,但是为测试过图片很大或者加载速度很慢的时候是否可行.

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

  • 学习JavaScript图片预加载模块

    前言 在一个应用中,通常会有很多图片,众所周知,加载图片需要时间,在图片没有加载出来之前,页面会是空白,为了提升用户体验,应用的开发人员使出浑身解数,其中最为常见的就是在图片没有加载完成之前,有一个加载动画.这里用到的技术主要是图片预加载.图片预加载的原理并不难,当给一个Image对象设置src属性后,图片就开始加载.给Image对象指定事件要位于设置src属性之前. 涉及到的内容 1.需要预加载的图片并不仅仅只是一张,通常将所有图片的信息保存在一个数组或者对象中,为了加载所有的图片,需要遍历出

  • js图片预加载示例

    js图片预加载简单示例 复制代码 代码如下: function loadImage(url, callback) {    if(url!='null') {        var img = new Image();        img.src = url;        if(img.complete) {            callback(img);        } else {            img.onload = function(){               

  • JS判断图片是否加载完成方法汇总(最新版)

    JS判断图片是否加载完成方法汇总(最新版)

    有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧. 一.load事件 <script type="text/javascript"> $('img').onload = function() { //code } </script> 优点:简单易用,不影响HTML代码. 缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方 二.jquery方法 <script

随机推荐