Изображение занимает много времени для загрузки с помощью JQuery

Question

У меня есть следующий код JQuery для изменения изображения SRC на странице. Изображение srcs является динамическим на странице. Как только они загружаются, я использую код jquery для изменения src. Если измененное изображение SRC не найдено, я загружаю оригинал.

Ниже код ..

function changeThePath(imagePath){ 
    var imageNamePath = imagePath; 
    var imageLocalPath =''; 

    var s = imageNamePath.split("/"); 
    for(i = 0; i < s.length-1;i++){ 
      imageLocalPath = imageLocalPath+s[i]+'/'; 
    } 
    console.log("imageLocalPath "+imageLocalPath); 
    s=s[s.length-1]; 
    s=s.split(".")[0]+"_newImage."+s.split(".")[1]; 
    console.log("final modified: "+(imageLocalPath+s)); 
    return imageLocalPath+s; 

} 

var originalPath = jQuery("li.toycar img").attr('src'); 
console.log("ORIGINAL PAT.. "+originalPath); 
var newPath=changeToFeaturedCar(originalPath); 
jQuery("li.toycar img").attr('src',newPath); 

jQuery("li.toycar img").error(function() { 
    console.log("error loading image"); 
    jQuery(this).attr("src", originalPath); 
}); 

код нормально. Изображение меняется. Но это занимает много времени. Как я могу уменьшить его?

Пожалуйста, помогите.

Answer 1

Используйте следуя логике, устанавливая источник ни один приложенном элемент:

var $imgs = jQuery("li.toycar img"), 
    newPath = changeToFeaturedCar(originalPath); 
$('<img/>', { 
    src: newPath, 
    load: function() { 
     $imgs.attr('src', newPath); // would used cached version now! 
    }, 
    error: function() { 
     console.log("error loading 'newPath' image"); 
    } 
});