动态添加图像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'); 
} 

希望这有助于，如果您有任何问题或建议（我相信有更好的方法可以做到这一点），然后随意让我知道！