I have an application that all it does is consult an API and retrieve a list of objects. Each object is simple, it has a title, a description, and another array containing IDs.
These IDs allow me to consult in another API endpoint the image that this object should have when it is displayed on the page. It turns out that it is much faster to obtain the text than the image, therefore in my interval the text is changed before, and after a few seconds the image, and I need this to happen simultaneously. How can I get the text to display at the same time as the image?
I am very new to this language, I am dedicated to the backend, but I was assigned this task so it is likely that I am not expressing myself or doing things very well, but I would appreciate your help to achieve this behavior. I leave you some fragments of my code that I hope will help you better understand my query.
This is my HTML file.
<body ng-controller="ControladorAPI">
<div class="fullscreen-container">
<img ng-src="{{imagenActiva}}" alt="Cargando Presentaciones..." class="fullscreen-image">
<div class="content-container">
<h1> {{presentaciones[I].TituloPresentacion}}</h1>
<p>{{presentaciones[I].DescCorta}}</p>
</div>
</div>
And this is my script (with AngularJS) file
$scope.cancelarTempo = function () {
$interval.cancel(temporizador);
temporizador = null;
}
$scope.scrollear = function () {
if ($scope.I === $scope.presentaciones.length - 1) {
//Cancelo el timer
$scope.cancelarTempo();
//Obtengo nuevamente los datos (esto reactiva el tempo solo)
getDatos();
$scope.I = 0;
}
if ($scope.presentaciones.length !== 0) {
$scope.I = ($scope.I + 1) % $scope.presentaciones.length;
//Obtengo la imagen que deberia ir en el fondo
$scope.IdImagenActual = $scope.presentaciones[$scope.I].Imagenes[0].IdImagen;
getImagen($scope.IdImagenActual);
} else {
$scope.I = 0;
}
}
function getDatos() {
$scope.presentaciones = [];
$http.get(baseURL + "/api/articulos/presentaciones")
.then(function (response) {
//Aca trabajo la respuesta de la consulta
$scope.presentaciones = response.data.Presentaciones;
console.log('Datos obtenidos');
if (temporizador === null) {
$scope.IdImagenActual = $scope.presentaciones[$scope.I].Imagenes[0].IdImagen;
getImagen($scope.IdImagenActual);
temporizador = $interval(function () {
$scope.scrollear();
}.bind(this), 15000);
}
})
.catch(function (error) {
//Manejar los errores desde aca
console.error(error);
});
};
function getImagen(idImagen) {
$http.get(baseURL + "/api/articulos/imagen/" + idImagen, { responseType: 'arraybuffer' })
.then(function (response) {
var arrayBufferView = new Uint8Array(response.data);
var blob = new Blob([arrayBufferView], { type: 'image/png' });
var urlCreator = window.URL || window.webkitURL;
vm.Imagen = urlCreator.createObjectURL(blob);
$scope.imagenActiva = vm.Imagen;
})
}
As you can see, the goal is for the page to automatically and infinitely scroll through the list I get from the API. I don't need anything more than that.
