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

希望这有帮助，如果您有任何问题或建议（我相信有更好的方法可以做到这一点），请随时告诉我！

动态添加图像jquery

3 个答案: