0

私はそれに関連するWebデザインとプログラミングに非常に慣れていません。JavaScript を使用して簡単なギャラリーを作成していますが、jQuery を使用すると非常に簡単です。しかし、私はそれを使用することを許可されていません (割り当て)。

問題があるコードは次のとおりです。

var img = new Array(); //declared globally, accessed by other functions
function displayImage(){

var img_num = document.getElementById('img_num').getAttribute("value");

for(j=0;j<img_num;j++)
  img.push(document.getElementById('h'+j).getAttribute("value"));


var list_width = 0;
for(var i=0;i<img_num;i++) 
{      
   document.getElementById('list_holder').innerHTML += "<img src='" +img[i]+ "'onclick=\"show(this.id);\" height = \"70%;\"id='"+i+"'/>";
   list_width += document.getElementById(i).offsetWidth + 15;
}

document.getElementById('list_holder').style.width = list_width+"px";
return false;
}

ID が h0、h1、h2... などの要素は、画像のパスを含む非表示の入力タイプであり、ID の 0,1,2.. はタグです。

を使用してパスを配列に格納するためにJSでそれらを使用していimgますimg.push。次に、配列内の値を使用して、正確にその数のタグを作成します (高さを指定し、縦横比を決定するために幅を残します。次に、親の合計幅('list_width')<img>を計算する必要があります)。これらのタグの を使用することを考えました。divimglist_width+=document.getElementById(i).offsetWidth

しかし、ページを初めて開いたときに、実際の幅が返されていません。を返します4。これは基本的に、私が考え出したタグの最小幅です。ページを更新した場合にのみ、期待どおりに機能します。ページを読み込んだ直後に一度ページを更新することで回避策を使用できることは知っていますが、それを行うための「推奨」または「専門的な」方法があるかどうかを知りたいです。

前もって感謝します。

4

3 に答える 3

2

前述のように、属性のクエリを実行する前に、画像の読み込みが完了するまで待つ必要があります。何が起こっているかの例を次に示します。

img {
    width: 50px;
    height: auto;
    float: left;
    border-style:solid;
    border-width:1px;
}
img:hover {
    width: 300px;
}

<div id="display" class="main"></div>

var display = document.getElementById("display"),
    images = {
        "F12berlinetta": "http://www.ferrari.com/Site_Collection_Image_115x55/f12_thumb_home_115x55.png",
            "458 Spider": "http://www.ferrari.com/Site_Collection_Image_115x55/110823_458_spider_menu.png",
            "FF": "http://www.ferrari.com/Site_Collection_Image_115x55/ff_thumb_home_115x55.png",
            "458 Italia": "http://www.ferrari.com/Site_Collection_Image_115x55/458_italia_menu_1_dx_ok.png",
            "Ferrari California": "http://www.ferrari.com/Site_Collection_Image_115x55/california_menu_3_sx.png"
    },
    keys = Object.keys(images),
    loaded = 0,
    menuWidth = 0,
    noWaitWidth = 0;

function clickedIt(evt) {
    alert("You chose the " + evt.target.title);
}

function onLoaded(evt) {
    loaded += 1;
    menuWidth += evt.target.offsetWidth;
    evt.target.addEventListener("click", clickedIt, false);
    if (loaded === keys.length) {
        console.log("Waited load width", menuWidth);
    }
}

keys.forEach(function (key, index) {
    var newDiv = document.createElement("div"),
        newImg = document.createElement("img");

    newImg.id = "thumb" + index;
    newImg.src = images[key];
    noWaitWidth += newImg.offsetWidth;
    newImg.title = key;
    newImg.addEventListener("load", onLoaded, false);

    newDiv.appendChild(newImg);
    display.appendChild(newDiv);
});

console.log("Didn't wait load width", noWaitWidth);

jsfiddleで

追加: これは、HTML イメージ マークアップを標準の JavaScript の方法でドキュメントに配置します。理解できないことを説明しなければ、説明を単純化することは困難です。画像のタイトルとその URL を保持するオブジェクトがあります。オブジェクトをループし、画像をタイトルとともにドキュメントに配置し、画像の幅が正しくないことを確認します。画像ごとに、画像の読み込みを待機するイベント リスナーを設定し、画像が読み込まれると正しい画像の幅を取得します。また、各画像にクリックリスナーを設定して、どの画像をクリックしたかを通知します。CSS は標準の hover メソッドを示しているため、移動を画像の上に置くと、その画像がズームされます。

于 2013-04-21T11:11:57.453 に答える