0

私は、背景として画像を含む一連のdivを持っていますが、その時点でかなり大きな画像、1〜2MBです。

私がやりたいのは、コンテンツが表示されているときにのみコンテンツをロードすることです。

（デフォルトではdisplay：noneで、さまざまなリンクをクリックすると、jqueryを使用して上下にスライドします）。

4

2 に答える 2

2

コードを投稿する必要がありますが、これはあなたが探しているものかもしれません。

html

<a href="#">Link to click</a>
<div id="imgname"></div>

jquery

$('a').click(function(){
 $('div#imgname').html('<img src="image.path" />');
});

HTMLを送信し、divブロックを下にスライドします

<a href="#">Link to click</a>
<div id="imgname"><img src="image.path" /></div>
于 2012-05-12T08:19:38.303 に答える
0

以下は、うまくいくかもしれないアイデアの大まかなスケッチです。ロードする写真ごとに非表示の画像タグを作成し、onloadイベントハンドラーを直接アタッチします。insertロードしたばかりの画像を取得backgroundし、適切なに挿入するcssルールを作成するだけdivです。

<!DOCTYPE html>
<html>
  <head>
    <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js' type="text/javascript" charset="utf-8"></script>

    <style type="text/css" media="screen">
      div.placeHolder {
        width: 400px;
        height: 400px;
      }
    </style>
  </head>
  <body>


  <img  data-id='imageA' 
        src='http://some-large-image.jpg' 
        style='display:none;' 
        onload='insert(this);' />

  <div data-id='imageA' class='placeHolder' style='display:none;'></div>

  <script>
    function insert(img){
      $img = $(img);
      $div = $('div.placeHolder[data-id='+$img.attr('data-id')+']');
      var cssSnippet = "transparent url("+ $img.attr('src') +") no-repeat 0 0";
      $div.css('background', cssSnippet).show();
    }
  </script>

  </body>
</html>
于 2012-05-12T09:06:13.863 に答える