Изменение расширения изображения только с помощью javascript/jquery?

Question

Я делаю простой слайдер, чтобы показать работу моего друга. Я действительно только знаком с javascript/jquery, поэтому я не на 100% удобнее, используя что-то еще прямо сейчас.

Поскольку мой друг не имеет каких-либо знаний в области программирования, я стараюсь, чтобы это было очень просто для ее обновления (т. Е. Автоматизация создания новых изображений всякий раз, когда она добавляет новую в папку). Она будет загружать изображения в папку и должна будет их пронумеровать (т. Е. 1.jpg, 2.jpg). Мой javascript использует цикл for для циклических чисел (ей придется обновлять цикл, когда она добавляет новое изображение) и вставлять их в имя файла. ОДНАКО это ограничивает ее только загрузкой одного типа файлов. Есть ли способ изменить расширение только с помощью javascript?

Это то, что я до сих пор:

function callImages(){ 
    //create the image div 
    $('.artslider').append('<div class="image"></div>'); 

    //create the files array 
    var files = []; 

    //start the loop, starting position will have to be updated as images are added 
    for (i=8;i>=0;i--){ 

     //create the img src for a jpg img 
     var imgJPG = 'arts/'+i+'.jpg'; 

     //find the natural width of the image after it loads to see if it actually exists 
     var imgWidth = $('imgJPG').load().naturalWidth; 

     //if the width is undefined, replace the jpg extension with gif 
     if (imgWidth===undefined){ 
      var imgGIF = imgJPG.replace('jpg', 'gif'); 
      files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>'; 
     } 

     //otherwise keep the jpg extension 
     else { 
      files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>'; 
     } 

     //then add the images to the img div 
     $('.image').append(files[i]); 
    } 
}; 

Проблема с этим, если/еще в том, что она будет создавать только рисунок. Если вы переключите заказ, он создаст только jpg-образ.

редактировать: вот что производит этот код: https://googledrive.com/host/0B1lNgklCWTGwV1N5cWNlNUJqMzg/index.html

Answer 1

Проблема с этим битом кода:

var imgJPG = 'arts/'+i+'.jpg'; 
var imgWidth = $('imgJPG').load().naturalWidth; 

imgWidth всегда будет неопределенным.

Во-первых, вы передаете строку «imgJPG» вместо параметра imgJPG. Во-вторых, я думаю, что вы неправильно поняли селекторов jQuery, это используется для выбора элементов HTML, ввод пути к файлу здесь не принесет ничего. В-третьих, я думаю, вы неправильно поняли функцию load, которая используется для загрузки данных с сервера в HTML-элемент.

Я хотел бы предложить использовать функцию, как показано ниже, чтобы проверить, если изображение существует:

function urlExists(url) { 
    var http = jQuery.ajax({ 
    type:"HEAD", 
    url: url, 
    async: false 
    }); 
    return http.status == 200; 
} 

Затем в коде:

if (!urlExists(imgJPG)){ 
    var imgGIF = imgJPG.replace('jpg', 'gif'); 
    files[i] = '<img src="'+imgGIF+'" class="artsliderimg"/>'; 
} 
else { 
    files[i] = '<img src="'+imgJPG+'" class="artsliderimg"/>'; 
}