前言：
在使用onload的时候，我们总是会看到各种建议，以及在不同浏览器上的不同表现，这些别人总结的经验都不是一蹴而就的，都是在不断的敲代码，不断的试错，测试，优化只有才从坑里爬出来的。只有在遇到不明白的地方，努力搞明白，动手敲几遍，知识才是自己的。个人愚见～_~,不废话了…
先看一份代码：
<div
class
="
box
">
<
div
> 1111</
div
>
</
div
>
<
script
type
="
text
/
javascript
">
function
loadImage
(
url
,
callback
) {
var
img =
new
Image();
img.src = url;
console.log(
'----111----'
);
if
(img.complete) {
callback(img);
return
;
img.onload =
function
()
{
console.log(
'----333----'
);
callback(img);
console.log(
'----222----'
);
function
call
(img)
{
$(img).appendTo(
'.box'
);
loadImage(
'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1504976397726&di=62045a300551dd62608d3e9423221c1f&imgtype=0&src=http%3A%2F%2Fp9.qhmsg.com%2Ft01ffd2fe0a1210db89.png'
,call);
</script>
[闭包概念讲解](http:
分析以上代码：
这个方法功能是ok的，但是有一些隐患。
1
创建了一个临时匿名函数来作为图片的onload事件处理函数，形成了闭包。
相信大家都看到过ie下的内存泄漏模式的文章，其中有一个模式就是循环引用，而闭包就有保存外部运行环境的能力（依赖于作用域链的实现），所以 img.onload这个函数内部又保存了对img的引用，这样就形成了循环引用，导致内存泄漏。（这种模式的内存泄漏只存在低版本的ie6中，打过补丁 的ie6以及高版本的ie都解决了循环引用导致的内存泄漏问题）。
**这里有点类似于Object-c中block和self的Strong Reference cycle，即循环强引用，self引用了block，block中又用到了self，各自的引用计数器都为一，都强引用对方，不会销毁，造成内存泄漏。OC中就是把self变为weakSelf来解决，同理我们也要在这里有所作为。**
2
只考虑了静态图片的加载，忽略了gif等动态图片，这些动态图片可能会多次触发onload。
要解决上面两个问题很简单，在img.onload中把img.onload=
null
;
代码如下：
img.onload =
function
()
{
img.onload =
null
;
callback(img);
这样既能解决内存泄漏的问题，又能避免动态图片的事件多次触发问题。
在一些相关博文中，也有人注意到了要把img.onload 设置为
null
，只不过时机不对，大部分文章都是在callback运行以后，才将img.onload设置为
null
，这样虽然能解决循环引用的问题， 但是对于动态图片来说，如果callback运行比较耗时的话，还是有多次触发的隐患的。
隐患经过上面的修改后，就消除了，但是这个代码还有优化的余地：
if
(img.complete) {
callback(img);
return
;
经过对多个浏览器版本的测试，发现ie、opera下，当图片加载过一次以后，如果再有对该图片的请求时，由于浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。
对于 firefox和safari，它们试图使这两种加载方式对用户透明，同样
会引起图片的onload事件（而ie和opera则忽略了这种同一性，不会引起图片的onload事件），因此上边的代码在它们里边不能得以实现效果。
确实，在ie，opera下，对于缓存图片的初始状态，与firefox和safari，chrome下是不一样的（有兴趣的话，可以在不同浏览器下，测试 一下在给img的src赋值缓存图片的url之前，img的complete状态），但是对onload事件的触发，却是一致的，不管是什么浏览器。产生这个问题的根本原 因在于，img的src赋值与 onload事件的绑定，顺序不对（在ie和opera下，先赋值src，再赋值onload，因为是缓存图片，就错过了onload事件的触发）。应该 先绑定onload事件，然后再给src赋值，代码如下：
function
loadImage
(url, callback)
{
var
img =
new
Image();
img.onload =
function
()
{
img.onload =
null
;
callback(img);
img.src = url;
这样内存泄漏，动态图片的加载问题都得到了解决，而且也以统一的方式，实现了callback的调用。
以上引自[ img.onload 实现图片预加载方法](http:
[img onload事件绑定](http:
[图片的异步加载与onload函数](http:
前言： 在使用onload的时候，我们总是会看到各种建议，以及在不同浏览器上的不同表现，这些别人总结的经验都不是一蹴而就的，都是在不断的敲代码，不断的试错，测试，优化只有才从坑里爬出来的。只有在遇到不明白的地方，努力搞明白，动手敲几遍，知识才是自己的。个人愚见～_~,不废话了…先看一份代码：<body> <div class="box"> <div> 1111</div>
关于 Image 对象
onload
事件。
想获取的是 image 的 宽高值。所以用
onload
方法。另外是获取的远程图片。
但IE在第二次显示图片的时候，总是不走
onload
方法。代码：
var
img
= new Image();
img
.src = "loading.gif";
img
.
onload
= function(){
var iheight =
img
.height;
var iwidth =
img
.width;
后来给xiaoniu同学看了后才知，
img
.src 应该是放在
onload
方法后边的。。
后来google下，才发现原来此类问题大家多有总
window
onload
与
img
onload
事件
通常，window.
onload
就是载入完dom之后运行的。而
img
就是载入完图片完运行它的
onload
事件。依据
img
的src是否载入完毕。
因此。看以下代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww...
onload
与complete介绍
complete只是HTMLImageElement对象的一个属性，可以判断图片加载完成，不管图片是不是有缓存；而
onload
则是这个Image对象的load事件回调，当图片加载完成后执行
onload
绑定的函数。
给下面一个例子，解释下：
document.getElementById('load').onclick = function() {
...
之前做过这样一个需求，要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src，然后在页面底部初始化js，然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点，
第一，得到图片的width和height
第二，比较图片的width和height与box的width的height的大小，共有四种情况，
charset: 可选。指定src引入代码的字符集，大多数浏览器忽略该值。
defer: boolean, 可选。延迟脚本执行，相当于将script标签放入页面body标签的底部，js脚本会在document的DOMContentLoaded之前执行。除IE和较新版本的Firefox外，其他浏览器并未支持。
language: 已废弃。大部分浏览器
如果您上传的图片太大，可能会导致 `
img
.
onload
` 事件无法及时触发。这种情况下，您可以使用 `FileReader` API 将图像转换为数据 URL，然后使用 canvas 将其压缩为所需大小。以下是一个示例代码：
```javascript
function compressImage(file, maxWidth, maxHeight) {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.readAsDataURL(file);
reader.
onload
= function() {
const
img
= new Image();
img
.src = reader.result;
img
.
onload
= function() {
const canvas = document.createElement('canvas');
let width =
img
.width;
let height =
img
.height;
if (width > maxWidth) {
height *= maxWidth / width;
width = maxWidth;
if (height > maxHeight) {
width *= maxHeight / height;
height = maxHeight;
canvas.width = width;
canvas.height = height;
const ctx = canvas.getContext('2d');
ctx.drawImage(
img
, 0, 0, width, height);
canvas.toBlob(blob => {
resolve(new File([blob], file.name, { type: file.type }));
}, file.type, 0.7);
reader.onerror = reject;
这个函数接受一个文件对象、最大宽度和最大高度，并返回一个 Promise，该 Promise 将解析为经过压缩的文件对象。您可以在上传文件之前调用此函数，然后将返回的文件对象上传到服务器。
