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 anchor, img;，以便将它们限定在createItem函数中。如果没有它，img.observe被调用时anchor指向最小集合，而不是正确集合。

Scriptaculous Effect.Appear失败不一致？

1 个答案: