Hi! I have this code for finding the last members I add on my web app:

 

 

function BuscarUltimosUsuarios()
{
      //Para saber cuando agregamos el primer miembro y luego no aplicar el offset-1
      var flag = 0;

      //Buscamos los ultimos usuarios
      var query = new Kinvey.Query();
      query.limit(5);
      var promise = Kinvey.DataStore.find('miembros', query);
      promise.then(function(entities) {

          for (var i = 0; i < entities.length; i++)
          {
              var object = entities[i];
              var fotoURL = entities[i].foto._downloadURL;
              var nombre1 = entities[i].nombre1;
              var apellido1 = entities[i].apellido1;

              if(flag == 0)
              {
                  var codigo = '<div class="col-md-2 col-sm-2 col-md-offset-1 box0 box-usuario miembro" data-toggle="modal" data-target="#myModal" miembro-id="' + object._id + '" >' +
                                  '<div class="box1">' +
                                      '<p><img src="' + fotoURL + '" class="img-circle img-ultimo" width="80"></p>' +
                                      '<p><b>' + nombre1 + " " + apellido1 + '</b></p>' +
                                  '</div>' +
                              '</div>';
                  $('.ultimos-usuarios').append(codigo);
                  //$('.box-usuario').fadeIn('slow');
                  flag = 1;
              }
              else
              {
                  var codigo = '<div class="col-md-2 col-sm-2 box0 box-usuario miembro" data-toggle="modal" data-target="#myModal" miembro-id="' + object._id + '" >' +
                                  '<div class="box1">' +
                                      '<p><img src="' + fotoURL + '" class="img-circle img-ultimo" width="80"></p>' +
                                      '<p><b>' + nombre1 + " " + apellido1 + '</b></p>' +
                                  '</div>' +
                              '</div>';
                  $('.ultimos-usuarios').append(codigo);
              }

          }

            $('.ultimos-usuarios').fadeIn("slow");
            

      }, function(error) {
          console.log("Error buscando últimos usuarios. Descripcion: " + error.description);
      });

}

The problem is that when the website is loading, the images are showing too slow. Is there anything I could do to fix this or is just a common problem with GCS??

 

Dan -- Your code above is using a synchronous for loop to resolve the images, that means that none of the images will be displayed until the entirety of the logic has completed.   Using an asynchronous loop and using promises and their callbacks could improve your performance in this case. 

Thanks,

Mmm that's weird because when using Parse I didn't have problems with this same code at all. Can you give me an example of your solution please?

 

Dan,

We don't generate custom code here, but I can tell you that the for loop on line 12 is waiting for each iteration to complete.   We implement the following async framework which allows you to use an asynchronous foreach loop to process your data:  https://github.com/caolan/async

If you have any other questions please let me know.

Thanks,

I just implemented an asynchronous loop but I keephaving the same trouble. Each image takes like 2 seconds to load and finally show.