動態添加圖像jquery

Question

我想動態地添加圖像到一個頁面。我的HTML包含以下行的代碼：

<div class="figuredisplay"></div> 

我的CSS中包含的代碼下面幾行：

.figuredisplay { 
    width:350px; 
    height:600px; 
    padding:10px; 
    border:5px solid gray; 
} 

現在，我動態獲取圖像的位置，並試圖在「figuredisplay」添加這些圖像。我正在使用jquery來做到這一點。所以，我的代碼是這樣的：

show_figure= function(figrlocation){ 
    $('.figuredisplay').empty(); 
    var figrhtmlcode='<img src="' + figrlocation + '" width="300" height="300">'; 
    $('.figuredisplay').append(figrhtmlcode); 
} 

但是沒有圖像顯示在div中。當我嘗試

$('.figuredisplay').append(figrlocation); 

它正確地在div元素上顯示圖形位置（在磁盤上）。在做了一些搜索之後，我嘗試了

$('<img src="'+ figrlocation +'">').load(function() { 
    $(this).width(300).height(300).appendTo('.figuredisplay'); 
}); 

以及沒有運氣。任何一點我做錯了什麼？任何幫助將不勝感激。

Answer 1

嘗試使用.html（）而不是追加。

因此，這將是這樣的：

var img = '<img src="image.jpg" width="300" height="300">'; 

$('.figuredisplay').html(img); 

希望它能幫助。

Answer 2

show_figure= function(figrlocation){ 
    $('.figuredisplay').empty(); 
    var figrhtmlcode='<img src="' + figrlocation + '" width="300" height="300">'; 
    $('.figuredisplay').append(figrhtmlcode); 
} 

此代碼應該工作。你確定figrlocation不是未定義的嗎？檢查控制檯是否有錯誤。

Answer 3

我將使用jQuery，在這裏找到：http://jquery.com/download/
我通過圖像的文件夾都命名爲PIC（前pic1.jpg，pic2.jpg，pic3.jpg在循環做到這一點，等等......）

我過去是如何做到這一點的，只是在圖像中添加了兩個函數。
第一個是onLoad

• 這將讓我們調用我們的功能添加下一個圖像

第二個是onError

• 這將讓我們調用我們的功能停止加載圖像（因爲我們用完了）

首先，我們將使用以下變量：

var preSrc = "/images/pic";  // This gives the first part of the path to the images 
var n = 1;      // This will be which image we are on (denoted by #) 
var fileType = ".jpg";  // The file type for your images 

// Now put it all together 

var imgSrc = preSrc + n + fileType; // This is the full source for your images 

// Now add the rest of the html to be appended 

var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />'; 

那麼這裏發生了什麼？
我們前幾個變量是相當自我解釋的，我們只是創造了我們圖像的來源。儘管這裏最後一個變量有點困難。我們正在創建一個名爲img的變量，它將保存將被添加到文檔中的實際html標籤。它還保存當前圖像的數據（n）。

它也有兩個屬性，我想談談。
第一個是onLoad功能：

• 這裏我們調用了一個名爲nextImg功能。我們稍後會創建這個功能，但現在只需知道它會準備好並將我們文件夾中的下一張圖像發佈到頁面。

，第二個是onError功能：

• 這裏我們調用了一個名爲onError功能。這絕不是最好的停止加載圖像的方式，但它是我個人發現的可以使用普通javascript的唯一方式。再次，我們將創建這是一個時刻，所以只要知道這將停止加載圖像時，我們用完了。

既然我們有我們的照片來源照顧，我們需要編寫將我們的圖像添加到頁面的功能。這個函數可以用幾種不同的方式調用，但我現在會堅持一個。

//When the document is loaded, this function will be called 

$(document).ready(function() { 
    //Create the variables in this function so we can use them 
    var preSrc = "/images/pic"; 
    var n = 1; 
    var fileType = ".jpg"; 

    var imgSrc = preSrc + n + fileType; 

    var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />'; 

    $('#imgContainer').append(img); // Here we use jQuery to append our image to a container with the id of "imgContainer" (This can of course be changed) 
}); 

所以，現在，我們的第一個圖像加載頁面時準備好了，我們可以創建「的onLoad」功能：

// Here we create our "nextImg" function and create the variable called "currentImg" which will tell us what image was just loaded on the page 
function nextImg(currentImg) { 

    //Create the variables in this function so we can use them 
    var preSrc = "/images/pic"; 
    var n = currentImg++; // We add 1 to the current image number so that we can publish the next image in the folder to our page 
    var fileType = ".jpg"; 

    var imgSrc = preSrc + n + fileType; 

    var img = '<img src="' + imgSrc + '" onLoad="nextImg(' + n + ');" onError="stopLoad(this);" />'; 

    $('#imgContainer').append(img); // Now that we have incremented our image number, this statement will now add the next image in our folder to the page. 
} 

兩降，一去！
現在讓我們開始研究我們的最後一個函數onError。

// Here we have the same setup as the last function except for the name 
function stopLoad(currentImg) { 

    // Now we simply make sure that there is no "broken image" link left on the page 
    $(currentImg).css('display', 'none'); 
    $(currentImg).css('visibility', 'hidden'); 
} 

希望這有助於，如果您有任何問題或建議（我相信有更好的方法可以做到這一點），然後隨意讓我知道！