直到第二次点击,AJAX内容才获得css

时间:2011-10-16 09:05:29

标签: javascript jquery css ajax

我的问题是我的jquery滑块内容在第二次点击之前没有完全加载。我认为它可能是一个CSS问题,因为在safari我可以看到内容加载和运行,但它在第一次点击时被切断。在第二个它完全加载没有问题。

这是我的javascript加载功能:

$(document).ready(function () {

    $.history.init(pageload);   

    $('a[href=' + window.location.hash + ']').addClass('selected');

    $('a[rel=ajax]').click(function () {

        var hash = this.href;
        hash = hash.replace(/^.*#/, '');
        $.history.load(hash);   

        $('a[rel=ajax]').removeClass('selected');
        $(this).addClass('selected');
        $('#body').hide();
        $('.loading').show();

        getPage();

        return false;
    }); 
});

function pageload(hash) {
    if (hash) getPage();    
}

function getPage() {
    var data = 'page=' + encodeURIComponent(document.location.hash);
    $.ajax({
        url: "loader.php",  
        type: "GET",        
        data: data,     
        cache: false,
        success: function (html) {  

            $('.loading').hide();               
            $('#content').html(html);
            $('#body').fadeIn('slow');  
            $("#slider").easySlider();




        }       
    });
}

我正在使用PHP从外部文件获取,实例看起来像这样。

切换($ _ GET ['page']){

/ * ------------------------ --------------------- --- ------------------------ ----------------------- - * /

case '#YELLOW' : 

$page = '




<div id="slider">
    <ul>                
        <li><img src="http://www.aaronbeasley.com/easy/archive/YELLOW/images/1.jpg" alt="" /></a></li>
        <li><img src="http://www.aaronbeasley.com/easy/archive/YELLOW/images/2.jpg" alt="" /></a></li>
        <li><img src="http://www.aaronbeasley.com/easy/archive/YELLOW/images/3.jpg" alt="" /></a></li>

    </ul>
</div>

'; 


break; 

我的css在这里:http://aaronbeasley.com/1/css/style.css

并且滑块的css看起来像这样

         #slider li,{ 
    width: 500px;
    height: auto;
    overflow:hidden; 
    }   

您可以在此处看到该页面:

http://aaronbeasley.com/1/

0 个答案:

没有答案