Question

我有一个脚本在ajaxes的图像列表中，然后ajax调用的成功函数将图像打开为画布背景，以便用户可以在顶部绘制叠加层。

基本上我有for (key in data.imgs) { OpenImg(data.img[key]); }来调用它。我需要高度和高度OpenImg函数中的宽度，以便我可以指定画布大小。

麻烦在于我无法使图像无序。我的img.onload函数是延迟高度/宽度检测直到图像加载所必需的。

我所知道的是我需要等待图片加载，但还需要连续加载它我可以将画布id分配从计数器切换到URL的子字符串，其中包含页码。

问题是即使重命名画布ID后，他们也不会改变屏幕上的顺序。有没有一种好方法可以对它们进行排序？我可以不附加到页面，然后使用JQuery .each（）放置它们，但是如何使id。按顺序运行.each（）？

TL; DR：我可以使这个异步函数看起来是同步的，而不是它实际上是同步的吗？

function OpenImg(url) {
    var img=new Image();
    img.src=url;
    img.onload=function() {
        $('<div/>',{'id':'_wrap_pg'+canvasCount,'class':'wrapPage','Width':img.width,'Height':img.height,'data-w':img.width,'data-h':img.height,'data-url':url}).appendTo('#filebox');
        $('<canvas/>',{'id':'pg'+canvasCount,'Width':img.width,'Height':img.height,'data-w':img.width,'data-h':img.height,'data-url':url}).appendTo('#_wrap_pg'+canvasCount);
        var el=document.getElementById('pg'+canvasCount);
        if (typeof(G_vmlCanvasManager)!='undefined') G_vmlCanvasManager.initElement(el);

        var date=new Date().getTime();  // use timestamp to force image not to cache
        $('#pg'+canvasCount).css({'background-image':'url('+url+'?t='+date+')',
            'filter':      "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"', sizingMethod='scale')",
            '-ms-filter':  "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"', sizingMethod='scale')"});

        InitDraw(canvasCount);  // function to attach events to newly created canvas
        if (canvasCount==1) {
            // if page 1 set zoom value to scale canvas/image to fit height
            $('#zoom').val(Math.floor(100/(img.height/$('#filebox').height()))-1);
        }
        zoom();  // my custom zoom function
        canvasCount++;
    }
}

Answer 1

作为OpenImg函数的一部分创建并将画布附加到页面，不是作为onload函数的一部分。您可以对<div>执行相同的操作。画一点“加载”图标或文字，这样就可以为用户提供一些反馈。这将确保元素按其应有的顺序排列，无论加载顺序如何。

Answer 2

首先，我会将你的对象变成一个数组：

var arr = [];
for (key in data.imgs) { arr.push(data.img[key]); }

然后我会打电话给你的方法：

OpenImg(arr, 0);

你的方法是：

function OpenImg(arr, index) {
    var img=new Image();
    img.src=arr[index];
    img.onload=function() {
        $('<div/>',{'id':'_wrap_pg'+index,'class':'wrapPage','Width':img.width,'Height':img.height,'data-w':img.width,'data-h':img.height,'data-url':url}).appendTo('#filebox');
        $('<canvas/>',{'id':'pg'+index,'Width':img.width,'Height':img.height,'data-w':img.width,'data-h':img.height,'data-url':url}).appendTo('#_wrap_pg'+index);
        var el=document.getElementById('pg'+index);
        if (typeof(G_vmlCanvasManager)!='undefined') G_vmlCanvasManager.initElement(el);

        var date=new Date().getTime();  // use timestamp to force image not to cache
        $('#pg'+index).css({'background-image':'url('+url+'?t='+date+')',
            'filter':      "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"', sizingMethod='scale')",
            '-ms-filter':  "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='"+url+"', sizingMethod='scale')"});

        InitDraw(index);  // function to attach events to newly created canvas
        if (index==1) {
            // if page 1 set zoom value to scale canvas/image to fit height
            $('#zoom').val(Math.floor(100/(img.height/$('#filebox').height()))-1);
        }
        zoom();  // my custom zoom function
        if (index < arr.length - 1)
            OpenImg(arr, ++index);
    }
}

我已将所有“canvasCount”代码更改为Array的索引，并且只有在最后一个OpenImg函数完成时才会调用它。

按ID按字母顺序在页面上排序HTML元素

2 个答案: