Scriptaculous Effect.Appear 失败不一致？

Question

问题：
多个异步调用的 Effect.Appear() 调用无法全部正确解析。

背景：
我有一个页面从不同的服务器延迟加载 10-20 个项目。由于当前的体系结构，每个项目都必须加载自己的 http 请求（而不是批量请求），因此我不能等待所有这些 http 请求在页面完成加载之前返回 - 我真的不得不偷懒加载它们以获得良好的体验。

这工作得很好，直到我想通过让项目淡入而不是粗暴地出现在页面上来对其进行一些修饰。当我尝试使用 Effect.Appear() 时，并非所有项目每次都会出现。检查元素表明请求确实返回，并且 dom 元素确实被附加，占位符甚至被删除。但该元素仍然显示 style="display:none"。

每次都不是相同的元素，之前加载良好的元素可能无法在软刷新时正确加载，因此即使缓存似乎也无法解决问题。

代码：
这是控制加载的主要代码。

Javascript：

    /** create the html and attach it */
    createItem = function(photoDOM, json){
        //(creates this html)
        // <a href="<?=$itemPage?>" target="_blank">
        //      <img src="<?=$itemImage?>" 
        //        id="suggestedItemIMG_<?=$itemID?>" 
        //        class="suggestedItemIMG <?=$itemClass?>" 
        //        title="<?=$itemTitle?>"/>
        //      
        // </a>
        if(json.error == "removed"){
            photoDOM.remove();
            return false;
        }
        anchor = new Element('a', {
            href: json.a.href,
            target: '_blank'
        })
        img = new Element('img', {
            'class': "suggestedItemIMG " + json.img.itemClass,
            id: 'suggestedItemIMG_'+json.img.itemID,
            'title': json.img.imgTitle
        });
        anchor.appendChild(img);
        anchor.style.display = 'none';
        photoDOM.appendChild(anchor);

        img.observe('load', function(e){ //have it append to the doc after it loads and remove the placeholder
            photoDOM.down('.indicator').remove();
            anchor.appear({
                from: 0,
                to: 1
            });
        });

        img.src = json.img.src; //start loading
    }

    /** make the ajax request */
    loadItem = function(photoDOM){
        new Ajax.Request('/ajax/get_item.php', {
            parameters: { photoitem_id: photoDOM.select('.photoitem_id')[0].value },
            onSuccess: function(transport){
                var json = transport.responseText.evalJSON();
                createItem(photoDOM, json);
            }
        });
    }

PHP ajax 处理程序：

    if($itemStatus > 99) {
        echo json_encode(array("error"=>"removed"));
        exit;
    }

    $json = array(
        "a" => array("href" => $itemPage),
        "img" => array(
            "src" => $itemImage,
            "itemID" => $itemID,
            "itemClass" => $itemClass,
            "imgTitle" => $itemTitle,
        ),
        "item" => array(
            "status" => $itemStatus
        )
    );
    echo json_encode($json);

感谢您的帮助。 -K

Answer 1

尝试在函数中的某个位置添加一个 var 锚点，img;，以便将它们限定在 createItem 函数中。如果没有它，当调用 img.observe 时，anchor 会指向最小的集合，而不是正确的集合。