0

I don't have any problems such as an error but it's too lagging on the page. Here is my js:

$(document).ready( function() {
photosdone();

});

function photosdone() {
     setTimeout( function() { 
     photosupdates();
     photosdone();
     }, 800);

}

function photosupdates() {
$.getJSON("check_photos.php", { id:  $("#id").val() },function(data) {
    $("#photos").empty();
    $.each(data.result, function(){
    $("#photos").append("<li class='col-lg-3 col-md-3 '><img class='img-responsive' src='data:"+this['MIME']+";base64,"+this['img']+"' width=150px height=150px></li>");

    });
});
}

and here is my page:

<ul id="photos" class="row bar">
</ul>

While the page doesn't have picture, it's running as well. But when I upload some pictures more than 2, I think my page is stuck although it occurs in several times.

Unknown
  • 15
  • 4

2 Answers2

0

In photosdone() you call photosdone() again, it is ok ? Recursive photosdone calls makes your page laggy

Johan Willfred
  • 811
  • 7
  • 14
  • Yeah, i think so. How can I do ? Any ways to load pictures on real time but decrease network traffic a lot ? – Unknown Mar 30 '17 at 09:31
  • Also you can try to change setTimeout and recursion to something like `$(document).ready( function() { setInterval(function () { photosupdates(); }, 800) }); ` – Johan Willfred Mar 30 '17 at 09:35
  • If you need realtime updates of your content look at http://stackoverflow.com/questions/14051795/push-changes-to-a-webpage-without-refreshing – Johan Willfred Mar 30 '17 at 09:37
0

Instead of returning all images within the JSON response, every 800ms, you should just return their url instead. This will not only decrease network traffic a lot, it will also allow the browser to cache the images. Also, base64 encoded strings are much larger than binary image data (about 33%).

$("#photos").append("<li class='col-lg-3 col-md-3 '><img class='img-responsive' src='"+this['url']+"' width=150px height=150px></li>");
  • Yeah, i think so. How can I do ? Any ways to load pictures on real time but decrease network traffic a lot ? – Unknown Mar 30 '17 at 09:31
  • When you say real time, do you mean to send JSON and images within a single response? No, that's not possible. You first need to get the JSON file, read it's image urls and then load them separately. But I'm pretty sure this will increase the speed a lot. Also it would be better if you call photosdone() after you got the JSON response, not before. ps. edited my answer. –  Mar 30 '17 at 10:07