1

我正在尝试将图像动态添加到页面。我的 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');
 });

同样，没有运气。任何人都可以指出我做错了什么吗？任何帮助将不胜感激。

4

3 回答 3

1

尝试使用 .html() 而不是追加。

所以它会是这样的：

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

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

希望能帮助到你。

于 2012-11-03T23:28:50.190 回答
0 
show_figure= function(figrlocation){
  $('.figuredisplay').empty();
  var figrhtmlcode='<img src="' + figrlocation + '" width="300" height="300">';
  $('.figuredisplay').append(figrhtmlcode);
 }

这段代码应该可以工作。你确定 figrlocation 不是未定义的。检查您的控制台是否有错误。

于 2012-11-03T23:34:33.677 回答
0

我将使用 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');
}

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

于 2014-02-09T21:09:17.480 回答