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

appendの代わりに.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 など)
内の画像を循環することでこれを実現します。 ..)

過去にこれを行った方法は、単純に 2 つの関数を画像に追加することでした。
最初の存在onLoad

  • これにより、関数を呼び出して次の画像を追加できます

2つ目は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);" />';

では、ここで何が起こっているのでしょうか?
最初のいくつかの変数は自明ですが、画像のソースを作成しているだけです。ただし、ここでの最後の変数はもう少し難しいです。ドキュメントに追加される実際の html タグを保持するimgという変数を作成しています。また、現在の画像が何であるかについてのデータも保持します(n)。

それには、私が話したい 2 つの属性もあります。
最初はonLoad関数です：

  • ここでは、 という名前の関数を呼び出しますnextImg。この関数はすぐに作成しますが、ここでは、フォルダー内の次の画像をページに公開する準備が整っていることだけを知っておいてください。

2番目はonError関数です：

  • ここでは、 という名前の関数を呼び出しますonError。これは間違いなく画像の読み込みを停止する最良の方法ではありませんが、私が個人的に見つけた唯一の方法であり、プレーンな JavaScript で動作します。繰り返しますが、これは瞬間的なものです。画像がなくなると、画像の読み込みが停止することを覚えておいてください。

画像のソースを処理したので、画像をページに追加する関数を作成する必要があります。この関数はいくつかの異なる方法で呼び出すことができますが、ここでは 1 つに固執します。

//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.
}

2 ダウン、あと 1 つ！
それでは、最後の関数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 に答える