2015-04-22 78 views
0

我有以下jquery代碼來更改頁面的圖像SRC。圖像srcs在頁面上是動態的。一旦他們加載,我使用jquery代碼來改變src。如果找不到SRC圖像,我正在加載原始圖像。圖片花費很多時間來加載使用jquery

下面是代碼..

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); 
}); 

代碼是罰款。圖像在變化。但是這需要很多時間。我怎樣才能減少它?

請幫忙。

+0

你的意思爲「它採取了太多的時間」是什麼。實際請求是否較慢? – GNi33

+0

當頁面得到加載..默認情況下..部分是無..當jquery完成..我正在使該部分BLOCK。但它然後顯示原始圖像,然後瀏覽器顯示加載一段時間,然後我的圖像更改爲修改後的(changeThePath()函數之一)。 – user3095179

回答

0

使用下面的邏輯,設置源無附加元素:

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"); 
    } 
}); 
+0

我有這麼多的圖像在頁面上。它會執行所有部分嗎? – user3095179

+0

@ user3095179你必須處理它。您發佈的代碼只處理一個newPath。 –

+0

此邏輯..我只是適用..它正在改變所需的代碼..但服用的時間相同量.. .. STILL jQuery的 – user3095179

相關問題