• 图片缓存未触发onload


    需求:做轮播插件时,得计算图片的宽高,并根据容器最大最小宽高来使图片做适当调整。

    现象:图片超出未调整。

    未处理宽高的图片处理了图片宽高适应容器

     解决:

    function loadImage(url, callback) {
    		 var img = new Image(); //创建一个Image对象,实现图片的预加载
    		 img.onload = function () { //图片加载载完毕时异步调用callback函数。
    		        callback.call(this,true,img);//将回调函数的this替换为Image对象
    		    };
    		  img.onerror=function(){
    			   callback.call(this,false,img);
    		   } 
    		  img.src = url;	
    		};
    

    When the image is cached, the onload callback isn't called with your code as the load event is produced before the callback is set.

    当图片被缓存,在回调函数设置之前,load 事件已经产生,onload函数就没有被回调。 

    注:将onload写在src前面,这样可以兼容到IE8,这里是异步加载,图片从缓存中获取速度快,如果onload写在src后面有可能加载完onload不能触发。

    相关浏览器测试:后台设置了图片在一分钟之后缓存失效。response.addHeader("Cache-Control", "max-age=60");

    img说明:https://html.spec.whatwg.org/multipage/embedded-content.html#dom-image

    IE11: 点击地址栏旁边的刷新按钮,取服务端图片,自动带上弱ETag。 (注:location.reload和点击刷新按钮效果一样)

    IE11: 地址栏+enter ,浏览器取缓存,没有向服务器发出请求。

    IE11备注:onload可以写在src后面,读取浏览器缓存这个方法会触发。IE9和IE11上述现象基本一致。

    IE8 用location.reload()刷新会请求后台(有弱Etag),在网址中打回车键则不会请求后台,直接拿浏览器缓存。

    IE8直接读取浏览器缓存中的图片时,如果 先src连后onload回调,则onload不触发。

    火狐55.0.3 (32 位):点击刷新按钮,图片从后台取

    火狐:地址栏+enter,直接从浏览器缓存中取图片,且未产生请求,同时html拿的也是缓存未向后台请求(耗时为0)

    火狐:location.reload(),向后台请求图片

    FF备注: src可以写在onload后面,无论是否从浏览器中加载图片还是从服务端加载都可以触发onload

    Chome 版本 60.0.3112.113(正式版本) (64 位)

    chrome:点击刷新按钮,可能读取缓存(图片未超时)也可能请求后台

    chrome:地址栏+enter : 未超时 ,直接读取浏览器缓存

    chrome:Location.reload ,可能读取缓存(图片未超时)也可能请求后台

    chrome 备注: src可以写在onload后面,无论是否从浏览器中加载图片还是从服务端加载都可以触发onload。获取浏览器缓存时(diskcache和memorycache的不同可参考http://www.jianshu.com/p/74c3e333c104

     :为了图片加载时都触发onload,需要把onload写在src前面。本项目没有考虑兼容IE8以下的IE浏览器。

    以上直接取浏览器缓存(状态码是200,但是未请求后台)默认是在图片未过期的时候,过期了还是会向后台请求获取图片,其他未特殊说明则强制请求后台获取图片。

     参考问题解决的说明:https://stackoverflow.com/questions/14429656/onload-callback-on-image-not-called-in-ie8

  • 相关阅读:
    预备作业02 : 体会做中学(Learning By Doing)
    7-1 货币转换
    秋季学校总结
    人生路上对我影响最大的三个老师
    自我介绍
    2019寒假作业3(抓老鼠啊~亏了还是赚了?)编程总结
    人生路上对我影响最大的三位老师
    自我介绍
    秋季学期学习总结
    7-1 抓老鼠啊~亏了还是赚了?
  • 原文地址:https://www.cnblogs.com/xiaozhuyuan/p/7478421.html
Copyright © 2020-2023  润新知