/java-script/

Przykład ładowanie stron ajax'em wraz z loaderem

2012-05-06 17:35:07

Przykład zamieszczony na http://btbw.pl/examples/loader/

plik data.php

<?php

    switch($_POST[&quot;nr&quot;]){
        case 'page1':
            $page = array(
                'title' => '[1] Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
                'desc'  =&gt; 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasell....',
                'photo' =&gt; 'img/photo1.jpg?r='.rand()
            );
            break;
        case 'page2':
            $page = array(
                'title' =&gt; '[2] Sed eleifend vehicula nisl sed aliquet.',
                'desc'  =&gt; 'Sed eleifend vehicula nisl sed aliquet. Nam tempus metus nunc, eget bibe...',
                'photo' =&gt; 'img/photo2.jpg?r='.rand()
            );
            break;
        case 'page3':
            $page = array(
                'title' =&gt; '[3] Donec tincidunt sodales tortor, sit amet malesuada urna feugiat at.',
                'desc'  =&gt; 'Donec tincidunt sodales tortor, sit amet malesuada urna feugiat at. Fusce eu eleifend odio. ...',
                'photo' =&gt; 'img/photo3.jpg?r='.rand()
            );
            break;
    }
    $json =  json_encode($page);
    //sleep(1);
    echo $json;
?&gt;

plik script.js

var windowHeight;
var windowWidth;

$(window).load(function() {
    init();
    resizeWindow();
});

$(window).resize(function() {
  resizeWindow();
});

function init(){
    $("nav a").click(function(){
        var itemId = $(this).attr('id');
        getPage(itemId);
    });
    getPage('page1');
}

function resizeWindow(){
    windowHeight = $(window).height();
    windowWidth = $(window).width();
    $('#loader').css('height',windowHeight-50);
}

function getPage(pageId){
    showLoader();
    var page = $.ajax({
        url: "data/data.php",
        type: "POST",
        dataType: "json",
        data:{
            action:"page",
            nr:pageId
        },
        success: function(data){
            //var data = jQuery.parseJSON(data);
            showData(data);
        }
    });
}

function showData(obj){
    //wyświetlenie treści
    $("#title").html(obj.title);
    $("#desc").html(obj.desc);

    //pobranie grafiki
    var img = new Image();
    img.src = obj.photo;
    $("#photo").hide();
    img.onload = function() {
        var extraData = "  
Width: " +img.width+" Height: "+ img.height;
        $("#photo").html(img);
        $("#photo").append(extraData);
        $("#photo").fadeIn();
        hideLoader();
    }
}

function showLoader(){
    $('#loader').show();
}
function hideLoader(){
    $('#loader').hide();
}

w zasadzę wszytko można pobrać z przykładu.