jQuery Retina image replacement loop

Question

Я работаю над скриптом, который просматривает все изображения на странице и заменяет их версией «Retina ready», если этот файл существует. Проблема заключается в том, что, как цикл проходит через каждый образ, она изменяет переменные:

retinaText = "@2x"; 

$("img").each(function(){ 
    filename = $(this).attr("src"); 
    ext = "."+filename.substr((Math.max(0, filename.lastIndexOf(".")) || Infinity) + 1); 
    filesource = filename.split(ext)[0]; 
    retinaImage = filesource + retinaText + ext; 

    //check if images exists 

    $.ajax({ 
     url:retinaImage, 
     type:'POST', 
     error: function(){ }, 
     success: function(){ 
      //file exists 
      //replace image with retina ready image 
      //$(this).attr("src",retinaImage); 
     } 
    }); 
}); 

Я создал тестовую среду, в которой первое изображение было замены, а другие не делали, однако, так как цикл продолжается пробегают изображения, переменные меняются.

Если изображения настроены так:

<img src="image1.jpg" /> 
<img src="image2.jpg" /> 
<img src="image3.jpg" /> 
<img src="image4.jpg" /> 

И этот образ существует в том же каталоге:

<img src="image1@2x.jpg" /> 

Сценарий заканчивается пытается заменить image4 с «image4 @ 2x» потому что переменная retinaImage и $ (это) с тех пор изменились.

Любая помощь была бы принята с благодарностью.

Answer 1

Способ, которым вы объявляете свои переменные, помещает их в глобальную область. Например, retinaImage становится глобальной переменной и изменяется на каждой итерации .each().

Используйте ключевое слово var, чтобы создать локальные переменные. Например:

$("img").each(function(){ 
    var filename = $(this).attr("src"); 
    var ext = "."+filename.substr((Math.max(0, filename.lastIndexOf(".")) || Infinity) + 1); 
    var filesource = filename.split(ext)[0]; 
    var retinaImage = filesource + retinaText + ext; 
    //check if images exists 

    // ADDED: keep reference to current image 
    var currentImage = $(this); 

    $.ajax({ 
     url:retinaImage, 
     type:'POST', 
     error: function(){ }, 
     success: function(){ 
      //file exists 
      //replace image with retina ready image 

      // currentImage refers to the correct image, and retinaImage refers to that image's retina URL 
      currentImage.attr("src",retinaImage); 
     } 
    }); 
}); 

Локальные переменные сохраняют свою сферу в пределах текущей функции, а также closures.