Question

我有一些动态加载的图片会根据用户点击的链接而改变。

我需要在显示图像之前获取图像的宽度和高度，以便可以正确地格式化页面，但是.load（）事件将在图像完全加载之前触发，并且我的width / height调用返回NULL或0

在尝试获取尺寸之前，我需要一种检查图像是否实际加载的方法。

任何帮助？

CODE：

Ajax Call

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向我指出了一个名为imagesLoaded的精彩gitHub插件，它完美地完成了这项任务。

离奇，真的。

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

.load（）在图像准备好之前触发

1 个答案: