Question

Problem:
Multiple asynchronously invoked Effect.Appear() calls do not all resolve properly.

Background:
I have a page that lazy loads 10-20 items from a different server. Because of current architecture, each item must be loaded with its own http request (as opposed to a batch request), so I can’t wait for all those http requests to come back before the page finishes loading–I really have to lazy load them to get a decent experience.

This was working fine until I wanted to put a little bit of polish on it by having the items fade in instead of brusquely appearing on the page. When I try to use Effect.Appear(), not all of the items appear every time. Inspecting the elements shows that the requests did come back, and that the dom elements did get attached, and the placeholder even got removed. But the element still shows a style=”display:none”.

It’s not the same element every time, and an element that was loaded fine before may not load properly on a soft refresh, so even caching doesn’t seem to help the problem.

Code:
Here’s the main code that controls the loading.

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 handler:

    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);

Thanks for any help.
-K

Answer 1

Try add a var anchor, img; somewhere in the function so they are scoped into the createItem function. Without it when img.observe is called the anchor points to the least set and not the proper one.