幾乎完成與腳本加載圖像與Ajax

我想創建一個腳本來加載圖像（1 - 5），當它被加載它將改變當前圖像的來源。加載圖像時加載微調器是可見的。但腳本還沒有準備好，我需要一些幫助來完成它。幫助和指導表示讚賞！幾乎完成與腳本加載圖像與Ajax

我不知道我該如何處理URL並獲得新圖像？用jQuery .html(<img src.....？而且我不確定如何更改當前圖像的src。也許我在錯誤的軌道上，如果有更好的方法來解決這個問題，我很欣賞一些關於如何修改代碼的建議。

腳本：

$(document).ready(function(){ 

var res = { 
loader: $('<div />', {class: 'loader'}), 
container: $('.galleryContainer') 
} 

var img = $("#mainImage"); 

$("#menu ul li a").click(function() { 

var btnNum = $("a").index(this); 
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg"; 

$.ajax({ 
    url: ??, 
    beforeSend: function() { 
     res.container.append(res.loader); 
    }, 
    success: function(data) { 
     // Change src of current image 
     mainImage.attr({src: $(this) ???? 
     // Remove loader 
     res.container.find(res.loader).remove(); 
    } 
}); 
}); 
});

HTML：

<body> 
<div class="galleryContainer"> 
<img src="images/bella-sky-hotel-1.jpg" id="mainImage" /> 
</div> 

<div id="menu"> 
<ul> 
<li><a href="#">1</a></li> 
<li><a href="#">2</a></li> 
<li><a href="#">3</a></li> 
<li><a href="#">4</a></li> 
<li><a href="#">5</a></li> 
</ul>

來源

2014-03-26 3D-kreativ

是Ajax調用剛開圖像本身或從數據源？ –

@MarkS嗯我想我的想法是獲取數據源！？或者我可以從php文件加載img標籤行嗎？ –

您的網址將是您從中生成圖片的網頁。數據中有什麼？如果你只是將圖像作爲url（whatever.jpg），而不是使用jquery加載函數。 –

$(document).ready(function(){ 

var res = { 
loader: $('<div />', {class: 'loader'}), 
container: $('.galleryContainer') 
} 

var img = $("#mainImage"); 

$("#menu ul li a").click(function() { 

var btnNum = $("a").index(this)+1;//because 0 based 
var imgFile = "images/bella-sky-hotel-" + btnNum + ".jpg"; 

    res.container.append(res.loader);// Change src of current image 
    mainImage.attr({src: imgFile}) 
    // Remove loader 
    res.container.find(res.loader).remove(); 

}); 
});

來源

2014-03-26 19:03:37 Bellash

感謝您的代碼，但這是真的加載圖像的數據？或者它是如何工作的？ –

所以你想getImageData然後做什麼？回答我的問題，然後我將編輯我的答案。我想你必須以'string.'的形式下載這些數據。這很簡單，所以使用'Ajax'來加載服務器端的字符串。你的服務器端url必須能夠返回一個代表真實圖像數據的字符串。 – Bellash

感謝您的回答！我在學習jQuery，我不知道這些東西是如何工作的！我只是想創建一些腳本來顯示一個微調器動畫，而當用戶點擊一個按鈕後加載大圖像。我認爲當網站在移動設備上時顯示微調器動畫是一件好事。用戶點擊一個按鈕，但由於額外的加載時間似乎沒有發生。我知道我正在嘗試用jQuery .load（）構建一個簡單的腳本，我猜它會起作用，但是當我在jQuery頁面上閱讀時，它有一些問題。像上面的代碼Ajax會更好？ –

幾乎完成與腳本加載圖像與Ajax

回答

相關問題