CODEWITHSUNDEEP
javascriptphpjqueryajax
JayDee
JayDee

Reputation: 160

Images does not show immediately after ajax load

I'm using an Ajax for partial loading my website. Content of GET data has images but these images appear after few seconds on page. Image size is about 20kB, so this is not a bottleneck.

I'm using php page which returns some content. This page loads in a while with images immediately but with ajax it loads text, but images after few seconds. How can I achieve quick load?

I'm using this function:

function loadMainEvents(resultDiv, cat, limit){
  var spinner = new Spinner().spin(mainPageEvents);
  $.ajax({
    url: "/getMainPageEvents.php?category=" + cat + "&limit=" + limit,
    type: "GET",
    success: function(data){
        resultDiv.innerHTML = data;        
        spinner.stop();
    }
  }); 
};

EDIT: I created a test.php which is doing same thing

<html>
<head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js' type="text/javascript"></script>
</head>
<body>
    <div id="div" style="float:left;">wait</div>
    <div id="div2">wait</div>
    <script>
        $(function () {
            $.ajax({
                url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
                type: "GET",
                success: function (data) {
                    $("#div").html(data).on('load', function () {
                        $(this).fadeIn(250);
                    });
                }
            });

            $.ajax({
                url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
                type: "GET",
                success: function (data) {
                    $("#div2").html(data).on('load', function () {
                        $(this).fadeIn(250);
                    });
                }
            });
        });
    </script>
</body>

getMainPageEvents.php returns only web content.

Network from developer tools:

Developer tools Network

Upvotes: 2

Views: 1310

Answers (2)

Onyedikachi Oko - Dexter
Onyedikachi Oko - Dexter

Reputation: 460

Wrap the ajax function on setTimeout function to give the browser a breathing space while rendering. You can sikp the first ajax and wrap the others on setTimeout with increments of 20.

<script>
    $(function () {
        $.ajax({
            url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
            type: "GET",
            success: function (data) {
                $("#div").html(data).on('load', function () {
                    $(this).fadeIn(250);
                });
            }
        });


        setTimeout(function() {
        $.ajax({
            url: "/getMainPageEvents.php?category=&limit=10&from=29.11.2015&to=29.11.2015&pno=1",
            type: "GET",
            success: function (data) {
                $("#div2").html(data).on('load', function () {
                    $(this).fadeIn(250);
                });
            }
        });
        }, 20);
    });
</script>

Upvotes: 0

VIDesignz
VIDesignz

Reputation: 4783

You may want to try something like this in the success function. Hide the result div first and foremost, then after the data is loaded, show the div.

$(resultDiv).html(data).promise().done(function(){
    spinner.stop();
    $(this).fadeIn(250);        
});

Possible second solution

$(resultDiv).html(data).on('load', function(){
    spinner.stop();
    $(this).fadeIn(250);        
});

Upvotes: 1

Related Questions