Массив циклов в ajax

#arrays #ajax #loops

#массивы #ajax #циклы

Вопрос:

Чтобы предварительно загрузить свой веб-сайт, я пытаюсь выполнить цикл массива в Ajax, чтобы увидеть процент загрузки моих 3 изображений, но процент не отображается, только этот текст на странице!

Это проблема с кодировкой? Я использовал этот JSFiddle: https://jsfiddle.net/bababalcksheep/r86gM / .

Вот моя страница теста с 1 jpg: http://piecesdetheatre.free.fr/tests/test.html % ок

Вот моя страница теста с 3 jpg: http://piecesdetheatre.free.fr/tests/test2.html % не в порядке

Я новичок. Есть идеи, почему это происходит? Спасибо за вашу помощь.

 <!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>ajax percentage</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="robots" content="noindex, nofollow">
  <meta name="googlebot" content="noindex, nofollow">
  <meta name="viewport" content="width=device-width, initial-scale=1">


  <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js" ></script>

 
  
</head>
<body>
    <div id="progressCounter"></div>
<br>
<div id="loading">Loading</div>
<br>
<div id="data"></div>

    <script type="text/javascript">//<![CDATA[
array = ['gogol','labiche','courteline'];

for(var i=0;i<array.length;i  ){
//var id = array[i];
//console.log(id   array[i]);
var progressElem = $('#progressCounter');
var URL = "http://piecesdetheatre.free.fr/img/"   array[i]   ".jpg";
$("#loading").hide();
$("#progressCounter").append(URL);


$.ajax({
    type: 'GET',
    dataType: 'json',
    url: URL,
    cache: false,
    error: function (xhr, ajaxOptions, thrownError) {
        alert(xhr.responseText);//affiche le code source
        alert(thrownError);
    },
    xhr: function () {
        var xhr = new window.XMLHttpRequest();
        //Download progress
        xhr.addEventListener("progress", function (evt) {
            if (evt.lengthComputable) {
               document.getElementById("progressCounter").innerHTML =
            this.responseText;
            }
        }, false);
        return xhr;
    },
    beforeSend: function () {
        $('#loading').show();
    },
    complete: function () {
        $("#loading").hide();
    },
    success: function (json) {
        $("#data").html("data receieved");
    }
});
}

  //]]></script>

  

    

</body>
</html>

Ответ №1:

Несколько указателей (могут не полностью ответить на ваш вопрос)

Ваш ответ ajax — это изображение. Поэтому dataType не должно быть JSON, если его json jQuery попытается проанализировать ответ JSON. В вашем случае это не JSON, поэтому он выдаст ошибку.

Попробуйте dataType: 'text' или удалите эту пару ключ-значение.

document.getElementById(«progressCounter»).innerHTML = this.responseText;

Вы пытаетесь предоставить данные изображения элементу html. Это то, что вы видите на изображении.

Попробуйте это вместо

 document.getElementById("progressCounter").innerHTML = evt.total

1. Большое вам спасибо, это помогает мне получить свой процент. Если я напишу console.log(evt.total); Я получаю десятки разных значений. Почему ? Я должен получить только общий вес всех моих изображений?

2. @user14387116 Это потому, что вы загружаете несколько изображений, и для каждого изображения прогресс отличается. Вы показываете прогресс нескольких изображений в одном и том же div, поэтому процент прогресса будет меняться до тех пор, пока весь прогресс изображения не достигнет 100%

3. Деталь: когда я запускаю test.html или test2.html , в то время как полсекунды я вижу изображение (ы) ulrl, можно ли вместо этого отобразить 0%?

4. @user14387116 Вот из-за этой строки $("#progressCounter").append(URL); удалите и проверьте

Ответ №2:

вы должны использовать append

 for(var i=0;i<array.length;i  ){//var id = array[i];
//console.log(id   array[i]);
var URL = "<p>http://piecesdetheatre.free.fr/img/"   array[i]   ".jpg</p>"; $("#loading").hide();
$("#progressCounter").append(URL);

Ответ №3:

Я также пробовал этот код. Правильно ли это?

 var idArray = ['gogol.jpg' , 'ionesco.jpg' , 'williams.jpg'];
for(var i = 0;i < idArray.length;i  ) {
    (function(i) {
        var xhr = new XMLHttpRequest(); // ***
        xhr.open('GET', 'http://piecesdetheatre.free.fr/img/'   idArray[i]);
        //xhr.setRequestHeader('Authorization', authorizationToken);
        xhr.send(null);
        console.log(xhr.readyState);
        xhr.onprogress = function (event) {
        console.log('LOADING', xhr.readyState); // readyState will be 3
        console.log( Math.round(event.loaded / event.total * 100)  "%");
};
     
    })(i);
}