js的加载放在哪个位置
JavaScript如何断定图片资源已加载完成？
JavaScript如何断定图片资源已加载完成？
在实际的运用中有这样一种场景，某资源加载完成后再执行某个操作，例如在做导出时，后端通过打开模板页生成PDF，并返回下载地址。这时前后端通常需要约定一个flag，用以标识模板准备就绪，可以生成PDF了。
试想，如果模板中有图片，此时如何判断图片是否加载完成？
在此之前来了解一下jquery的ready与的区别，ready只是dom结构加载完毕，便视为加载完成。(此时图片没有加载完毕)，onload是指dom的生成和资源完全加载（比如flash、图片）出来后才执行。接下来回到正题，先从单张图片说起。
（1）、单张图片（图片在文档中）
// HTMLltimg idxiu //js $(document).ready(function(){ //jquery $(#xiu).load(function(){ // 加载完成 }) //原生 onload var xiu (xiu) xiu.onreadystatechange function(){ if(!||||){ // 加载完成 } }})
注：1、IE8及以下版本不支持onload事件，但支持onreadystatechange事件；2、readyState是onreadystatechange事件的一个状态，值为loaded或complete的时候，表示已经加载完毕。3、以下内容省略兼容
（2）、单张图片（图片动态生成）
//js var xiu new Image() function(){ // 加载完成 }
（3）、单张图片（结合ES6 Promise）
//js new Promise((resolve, reject)gt{ let xiu new Image() function(){ // 加载完成 resolve(xiu) } }).then((xiu)gt{ //code })
（4）、多张图片
var img [], flag 0, mulitImg [ _, , , ] var imgTotal mulitImg.length for(var i 0 i lt imgTotal i ){ img[i] new Image() img[i].src mulitImg[i] img[i].onload function(){ //第i张图片加载完成 flag if( flag imgTotal ){ //全部加载完成 } } }
（5）、多张图片（结合ES6 ()）
let mulitImg [ _, , , ] let promiseAll [], img [], imgTotal mulitImg.length for(let i 0 i lt imgTotal i ){ promiseAll[i] new Promise((resolve, reject)gt{ img[i] new Image() img[i].src mulitImg[i] img[i].onload function(){ //第i张加载完成 resolve(img[i]) } }) } (promiseAll).then((img)gt{ //全部加载完成 })
js放在body里面和外面的区别？
放在上面，先加载js脚本，放在下面，先加载dom，后加载js脚本