3

ユーザーがクリックしたリンクに応じて変化する動的に読み込まれる画像がいくつかあります。

ページを正しくフォーマットできるように、画像を表示する前に画像の幅と高さを取得する必要がありますが、画像が完全に読み込まれる前に.load（）イベントが発生し、幅/高さの呼び出しがNULLまたは0を返します。

寸法を取得する前に、画像が実際に読み込まれていることを確認する方法が必要です。

何か助けはありますか？

コード：

Ajaxコール

function loadImages() {
    //___ Variables
    var xmlhttp;
    var responseArray = [];

    if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else {// code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }

    xmlhttp.onreadystatechange=function() {

        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
            $("#preload").empty();
            //___ Get server response / Convert to Array / Drop last field
            var responseArray = xmlhttp.responseText.split(',');
            responseArray.pop();

            var windowHeight = $(window).height();
            var imgHeight = windowHeight * .9
            if (imgHeight > 1000) {//___ if WindowHeight is > 1000px make images max 900px
                imgHeight = 900;
            }

            //___ Place images in preload
            //$("#preload").append("<div id='contain'></div>");
            for(var i=0;i<responseArray.length;i++){
                $("<img src='"+responseArray[i]+"' id='responseImage"+i+"'>").appendTo("#preload");
            }
            ready();
        }

    };
    //console.log(portLink); //Display link clicked
    xmlhttp.open("GET","includes/displayimagesLive.php?portname="+portLink,true);
    xmlhttp.send();
}

ready（）関数：

function ready() {
    var div = document.getElementById("preload").childNodes;
    var count = $(div).length;
    console.log(count);

    $("#responseImage0")
        .load(function() {
            //alert("Loaded");
            alert($("#responseImage"+count).width());
        })
        .error(function() {
            alert("Error");
        });
}
4

1 に答える 1

1

未定義の仲間のユーザーは、完全に仕事をしているimagesLoadedと呼ばれる素晴らしいgitHubプラグインを私に指摘しました。

不気味な、本当に。

たくさんの調査を行い、MAMPとライブの両方をいじくり回した後、私はlazyLoadを使って仕事を終わらせました。主な理由は、私の画像が大きいのですが、それほど大きくはないので、プリロードが必要です。

于 2012-10-22T22:00:48.850 に答える