.load() 在图像准备好之前触发

Question

我有一些动态加载的图像，这些图像会根据用户单击的链接而变化。

我需要在显示图像之前获取图像的宽度和高度，以便正确格式化页面，但是 .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");
        });
}

Answer 1

用户 undefined 向我指出了一个很棒的 gitHub 插件，名为 imagesLoaded，它完美地完成了这项工作。

不可思议，真的。

在对 MAMP 和 live 进行了大量研究和讨论之后，我选择了 lazyLoad 来完成工作。主要是因为我的图片很大，但不是很大，需要预加载。