Как перебирать изображения с разными расширениями в папке с помощью JS

Question

Я пытаюсь выполнить итерацию всех изображений с разными расширениями из папки, но, к сожалению, он только итерации на первом («.jpg»), почему? Да, у меня есть изображения со всеми другими расширениями.

$(document).ready(function() 
{ 
    var img = 0; 
    var slides = new Array(); 
    var fileextension = [".jpg" || ".jpeg" || ".bmp" || ".gif" || ".png"]; 

    while (img < 7) 
    { 
     img++; 
     var src = 'images/' + img + fileextension; 
     slides.push(src); 
    } 

    var index = 0, timer = 0; 
    showNextSlide(); 
    timer = setInterval(showNextSlide, 10000); 

    function showNextSlide() 
    { 
     if (index >= slides.length) 
     { 
      index = 0; 
     } 
     document.getElementById('img1').src = slides[index++]; 
    } 
    }); 

Answer 1

Если вы хотите, чтобы все изображения со всеми расширениями файлов, вам также необходимо также перебирать расширения файлов. Измените ваш var fileextension=[]; к реальному массиву:

var fileextension = [".jpg",".jpeg",".bmp",".gif",".png"]; 

while (img < 7) 
{ 
    img++; 
    fileextension.forEach(function(ext){ 
     var src = 'images/' + img + ext; 
     //see the result in the console: 
     console.log(src, ext) 
     slides.push(src); 
    }); 
} 

Answer 2

Вы определяете var fileextension = [".jpg" || ".jpeg" || ".bmp" || ".gif" || ".png"]; с помощью || (OR) оператор. Поэтому инициализация вашей базы данных эквивалентна var fileextension = [".jpg"]; Это потому, что || возвращает первое значение, которое преобразуется в Boolean, равно true.

Answer 3

Похоже, что вы имели в виду, чтобы попробовать все возможные расширения для каждого изображения и полагаться на один из них доступны.

Как отметил @Maciej, код не выполнил эту логику, но это можно сделать, используя несколько другую логику и событие onLoad.

Однако, поскольку код работает в браузере, выполнение этого способа было бы очень дорогостоящим и неэффективным, потому что вы могли бы сделать 5x7 HTTP-запросов, чтобы в конечном итоге получить 7 изображений.

я рекомендовал бы один из этих вариантов:

1. Если возможно, используйте стандартный формат и расширение для всех изображений.
   Вы также можете оптимизировать изображения при преобразовании их в стандартный формат в качестве дополнительного преимущества.
2. Если у вас есть серверная логика, сделать вызов AJAX, чтобы получить список доступных изображений с сервера