0

ここで少し問題があります。JavaScript を使用して画像ギャラリーを作成しようとしていますが、問題が発生しました。最初の画像の読み込み時に画像のサイズを変更できますが、別の画像を読み込むとすぐにサイズが変更されません! ユーザーはさまざまなサイズの写真をたくさんアップロードできるようになるため、実際に機能させる必要があります。

すぐに使用できる画像ギャラリーなどを確認しましたが、必要なことは何もしていませんでした。

これが私のJavaScriptです：

function changeCurrentImage(conteneur)  
{  
    var img = conteneur.getElementsByTagName("img");

    var imgUrl = img[0].src;

    var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
    var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
    var currentImg = document.getElementById('currentImage');
    currentImg.src = imgFirstPart + "borne" + imgLastPart;

    resize(document.getElementById('currentImage'), 375, 655);
}

function resize(img, maxh, maxw) {  
  var ratio = maxh/maxw;  
  if (img.height/img.width > ratio){  
     // height is the problem  
    if (img.height > maxh){  
      img.width = Math.round(img.width*(maxh/img.height));  
      img.height = maxh;  
    }  
  } else {  
    // width is the problem  
    if (img.width > maxw){  
      img.height = Math.round(img.height*(maxw/img.width));  
      img.width = maxw;  
    }  
  } 
};

HTML は次のとおりです (ASP.Net Repeater を使用)。

<asp:Repeater ID="rptImages" runat="server">  
<HeaderTemplate>  
</HeaderTemplate>  
<ItemTemplate>  
<a href="#">  
    <div id="thumbnailImageContainer1" onclick="changeCurrentImage(this)">  
        <div id="thumbnailImageContainer2">  
            <img id="thumbnailImage" src="<%# SiteUrl + Eval("ImageThumbnailPath")%>?rn=<%=Random()%>" alt="Photo" onload="resize(this, 60, 105)" />  
        </div>  
    </div>  
</a>  
</ItemTemplate>  
<FooterTemplate>  
</FooterTemplate>  
</asp:Repeater>
4

4 に答える 4

1

ほとんどの場合、画像はまだダウンロードされていないため、img.height と img.width はまだありません。技術的には、画像全体がダウンロードされるまで待つ必要はありません。幅と高さがゼロ以外になるまで、タイマーで画像をポーリングできます。これは面倒に聞こえますが、時間をかけて正しく実行すればうまく実行できます。(私はこの目的のために作成した ImageLoader ユーティリティを持っています...一度に複数の画像を処理している場合でもタイマーは 1 つしかなく、サイズがある場合はコールバック関数を呼び出します) 私はマルセルに反対しなければなりません....クライアント側はこの種のものに最適であり、画像がサーバー以外のソースからのものであっても機能します。

編集：ImageLoaderユーティリティを追加：

var ImageLoader = {
  maxChecks: 1000,
  list: [],
  intervalHandle : null,

  loadImage : function (callback, url, userdata) {
    var img = new Image ();
    img.src = url;
    if (img.width && img.height) {
      callback (img.width, img.height, url, 0, userdata);
      }
    else {
      var obj = {image: img, url: url, callback: callback,
                checks: 1, userdata: userdata};
      var i;
      for (i=0; i < this.list.length; i++)    {
        if (this.list[i] == null)
          break;
        }
      this.list[i] = obj;
      if (!this.intervalHandle)
        this.intervalHandle = setInterval(this.interval, 30);
      }
    },

  // called by setInterval  
  interval : function () {
    var count = 0;
    var list = ImageLoader.list, item;
    for (var i=0; i<list.length; i++) {
      item = list[i];
      if (item != null) {
        if (item.image.width && item.image.height) {
          item.callback (item.image.width, item.image.height, 
             item.url, item.checks, item.userdata);
          ImageLoader.list[i] = null;
          }
        else if (item.checks > ImageLoader.maxChecks) {
          item.callback (0, 0, item.url, item.checks, item.userdata);
          ImageLoader.list[i] = null;
          }
        else {
          count++;
          item.checks++;
          }
        }
      }
    if (count == 0) {
      ImageLoader.list = [];
      clearInterval (ImageLoader.intervalHandle);
      delete ImageLoader.intervalHandle;
      }
    }
};

使用例:

var callback = function (width, height, url, checks, userdata) {
  // show stuff in the title  
  document.title = "w: " + width + ", h:" + height + 
      ", url:" + url + ", checks:" + checks + ", userdata: " + userdata; 
    var img = document.createElement("IMG");
    img.src = url;
    // size it to be 100 px wide, and the correct 
    // height for its aspect ratio
    img.style.width = "100px";
    img.style.height = ((height/width)*100) + "px";
    document.body.appendChild (img);
    };

  ImageLoader.loadImage (callback,
   "http://upload.wikimedia.org/wikipedia/commons/thumb/" +  
      "1/19/Caerulea3_crop.jpg/800px-Caerulea3_crop.jpg", 1);

  ImageLoader.loadImage (callback, 
   "http://upload.wikimedia.org/wikipedia/commons/thumb/" + 
      "8/85/Calliphora_sp_Portrait.jpg/402px-Calliphora_sp_Portrait.jpg", 2);
于 2010-11-12T22:22:43.910 に答える
0

コードのセットアップ方法を使用して、onload イベントからサイズ変更関数を呼び出してみます。

function resize() { 
  var img = document.getElementById('currentImage');
  var maxh = 375;
  var maxw = 655;
  var ratio = maxh/maxw;  
  if (img.height/img.width > ratio){  
     // height is the problem  
    if (img.height > maxh){  
      img.width = Math.round(img.width*(maxh/img.height));  
      img.height = maxh;  
    }  
  } else {  
    // width is the problem  
    if (img.width > maxw){  
      img.height = Math.round(img.height*(maxw/img.width));  
      img.width = maxw;  
    }  
  } 
};

function changeCurrentImage(conteneur)  
{  
    var img = conteneur.getElementsByTagName("img");

    img.onload = resize;

    var imgUrl = img[0].src;

    var imgFirstPart = imgUrl.substring(0, imgUrl.lastIndexOf('.') - 9);
    var imgLastPart = imgUrl.substring(imgUrl.lastIndexOf('.'));
    var currentImg = document.getElementById('currentImage');
    currentImg.src = imgFirstPart + "borne" + imgLastPart;


}

私はそれで遊んでいました。maxH/W とイメージ ID にはグローバル変数を使用してください。

于 2010-11-12T22:37:04.537 に答える
0

本当にうまく機能する代替手段を見つけました。その IMG の幅と高さを変更する代わりに、それを削除して新しいものを作成します。

function changeCurrentImage(conteneur)  
{ 
    var thumbnailImg = conteneur.getElementsByTagName("img");

    var thumbnailImgUrl = thumbnailImg[0].src;

    var newImgUrl = thumbnailImgUrl.replace("thumbnail", "borne");

    var currentImgDiv = document.getElementById('currentImageContainer2');
    var currentImg = currentImgDiv.getElementById("currentImage");
    if (currentImg != null)
    {
        currentImgDiv.removeChild(currentImg);
    }

    var newImg = document.createElement("img");
    newImageDiv = document.getElementById('currentImageContainer2');
    newImg.id = "currentImage";
    newImg.onload = function() {
        Resize(newImg, 375, 655);
        newImageDiv.appendChild(newImg);
    }
    newImg.src = newImgUrl;
}

また、人々が不思議に思うかもしれませんが、画像に新しいソースを割り当てるときは、.src の前に .onload を配置する必要があります。

于 2010-11-16T21:03:21.577 に答える
0

@コメント:いいえ、誰かが新しい画像をクリックするたびにページが更新されるため、サーバー側ではできません。それは、ユーザーにとってあまりにも煩わしく、煩わしいものです。

サムネイルに関しては、それらの画像はすでに適切なサイズで保存されています。表示されている大きな画像のみが、そのサイズの約 33% です。アップロードされた画像ごとに 3 つの画像が既にあるため、アップロードごとに 4 番目の画像をアップロードしたくありませんでした。

「currentImage」に関しては、追加するのを忘れていたので、参考になるかもしれません笑：

<div id="currentImageContainer">
<div id="currentImageContainer1">
<div id="currentImageContainer2">
<img id="currentImage" src="#" alt="" onload="resize(this, 375, 655)" />
</div>
</div>
</div>

@rob：ImageLoaderクラスを試してみます。これでうまくいくかもしれません。

于 2010-11-15T14:38:07.017 に答える