js中，如何等待多个图片加载完后再执行其他的js代码。

Posted 2023-03-17

代码如下：
var i=0;
var $pre4y_main=$(".y_main:lt(4) img[freealign]");
$pre4y_main.each(function()
$img=$(this);
$img.attr("src",$(this).attr("data-src"));
$img.attr("Imgvalidate","1");
$img[0].onload=function()
console.log("step"+i);
i++;
if($(this).attr("freealign")=="1")

$(this).css("left", function()return $(this).attr("x")- $(this)[0].clientWidth+"px");

else if($(this).attr("freealign")=="2")

$(this).css("left", function()return $(this).attr("x")- $(this)[0].clientWidth/2+"px");


;
);
console.log("steptwo");
$(".y_main:lt(4)").show();
$pre4y_main.css("visibility","visible");

火狐控制台返回的值是：
steptwo
step0
step1
step2
step3
step4
...
我想要的结果是：
step0
step1
step2
step3
step4
...
steptwo
请高手不吝赐教。

可以在js全局代码中，增加一个变量n，用作计数器，表示总图片数。

然后使用图片的onload事件，每成功加载一次图片，将计数器n减去1

当n变成0时，表示图片均加载完毕，这时即可开始执行其他JS代码。

具体示例代码：

var n=$pre4y_main.length;
...
$img[0].onload=function()    ...
    n--;
    if(!n)
        //执行其他JS代码
    
;

参考技术A 写个回调函数，传进onload里就可以了

追问

写个思路，哥哥

本回答被提问者采纳 参考技术B

当然啦，这里的onload事件handler是一个异步函数，注册了这个事件的handler之后代码就会继续执行，而当onload事件触发之后才会执行它的handler……

这样多半可以，我给个思路吧

/* 前略 */

var isReady = false; /* isReady 代表 img.onload 是否已经被触发 */

$img[0].onload=function()
    
    /* 这里放上原本在onload的handler中的代码，这里就不写出了 */
    
    isReady = true; /* 一旦onload事件被触发就把 isReady 变为 true */
);

while(!isReady)

    /* 什么也不做，这个循环在isReady变成true之前都会一直拖着程序不继续执行 */


console.log("steptwo");

/* 下略 */

追问

但是现在情况有点不同。那就是图片有很多个。要循环的等图片加载完才行。$img[0].onload是放在一个循环里面的。你看下我代码逻辑就知道了。

追答

嗯……我给你改一下吧。另外不要过于依赖库，连个选择器都非要用jQuery最后对你没有好处。

var $pre4y_main = $(".y_main:lt(4) img[freealign]");

/* 这里增加一个计数变量，逻辑就是当这个预计要加载的图片的数量和实际加载完成的图片的数量相同的时候就继续执行代码 */

var imgCount = 4；/* 这个数字取决于你有多少张图片需要加载 */
var imgLoadCount = 0; /* 这个是计数器，现在这个计数器是0 */

$pre4y_main.each(function()

    /* 前面的具体操作图片属性的代码，略 */
    
    $img[0].onload = function()
    
        /* onload原本的代码， 略 */
            
        /* 这里当onload的所有代码都执行结束之后，将计数器+1 */
        
        imgLoadCount++;
                           
        ;

);

/* 同理，空循环拖住代码 */

while(imgLoadCount != imgCount);

console.log("steptwo");

/* 下略 */

参考技术C 要把图片当成是图片对象才行~<br>var a=new image(); //这个是原生的js实例化<br>a.src=arr[shownum++].url;<br><br>然后image对象有一个属性“onload”,这个就是加载完成，当加载完成之后你可以执行一个函数比如<br>a.onload=function()<br>alert("完成加载");<br><br><br>这样当你的图片加载完成后就执行下面的函数了~

JS中的DOM

一、入口函数；

　　(1) $(document).ready()：简写为$(function()) DOM结构绘制完成执行，而无需等到图片或其他媒体下载完毕；jq

　　(2) $(window).load：在有时候确实我们有需要等到页面的所有东西都加载完后再执行时使用；jq

　　(3) window.onload=function()：必须等到页面内包括图片的所有元素加载完毕后才能执行；js

二、dom选择器：

　　(1) .getElementById();

　　(2) .getElementsByTagName()[];  标签名

　　(3) .getElementsByName()[];  只有部分标签name生效

　　(4) .getElementsByClassName()[];  类名

　　(5) .querySelector();  CSS选择器(1个),非实时。

　　(6) .querySelectorAll();  CSS选择器(1组)，非实时。

三、节点的类型：

　　(1) 元素节点----1

　　(2) 属性节点----2

　　(3) 文本节点----3

　　(4) 注释节点----8

　　(5) document----9

　　(6) DocumentFragment----11

四、节点的四个属性：

　　(1) .nodeName;  //元素的标签名，以大写表示，只读

　　(2) .nodeValue;  //Text或Comment节点的文本内容，可读可写

　　(3) .nodeType;  //该节点的类型，只读

　　(4) .attributes;  //Element节点的属性集合

五、节点方法：

　　Node.hasChildNodes();  //检查元素节点是否含有子节点

　　注：此子节点包含文本节点等

六、Element节点的属性：

　　(1) .innerHTML  例：div.innerHTML += "<h1>ABC</h1>"

　　(2) .innerText (火狐不兼容)/textContent (ie6不兼容)

七、Element节点的方法：

　　(1) ele.setAttribute("属性名","属性值");

　　(2) ele.getAttribute("属性名");

　　注：dom.className；可直接读写class；

　　(3) classList属性:用于操作类属性；

　　　　classList.add("类名1","类名2",….);

　　　　classList.contains("类名"); 判断是否包含；

　　　　classList.remove("类名1","类名2",….);

　　　　classList.toggle("");  切换

八、遍历节点树：

　　(1) .parentNode;  父节点（最顶端为document）

　　(2) .childNodes;  子节点们

　　(3) .firstChild;  第一个子节点

　　(4) .lastChild;  最后一个子节点

　　(5) .nextSibling;  后面一个兄弟节点

　　(6) .previousSibling;  前面一个兄弟节点

九、基于元素节点的遍历节点树：

　　(1) .parentElement;  父元素节点

　　(2) .childeren;  元素子节点们

　　(3) node.childElementCount===node.children.length

　　(4) .firstElementChild;

　　(5) .lastElementChild;

　　(6) .nextElementSibling;

　　(7) .previousElementSibling; 

十、DOM扩展：

　　(1) .getElementById;  //定义在Document.prototype上，

　　　　即Element节点上不能使用;

　　(2) .getElementsByName;  //定义在HTML.Document.prototype上,

　　　　即非HTML中的document不能用（XML DOC; Ele);

　　(3) .getElementsByTagName;  //定义Document.prototype和

　　　　Element.prototype;

　　(4) <body>;  document.body;

     　　 <head>;  document.head;

   　　   <HTML>;  document.documentElement;

　　(5) .getElementsByClassName\\.querySelectorAll\\.querySelector在

　　　　Document.proyotype和Element.prototype中均有定义；