Scriptaculous Effect.Appear Неудачно? - PullRequest
Новая
       16

Scriptaculous Effect.Appear Неудачно?

1 голос
/ 26 июля 2011

Проблема:
Многократные асинхронно вызванные вызовы 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);

Спасибо за любую помощь. -К

1 Ответ

1 голос
/ 26 июля 2011

Попробуйте добавить var anchor, img; где-нибудь в функции, чтобы они включались в функцию createItem.Без него, когда вызывается img.observe, anchor указывает на наименее установленный, а не на правильный.

...