我有一些动态加载的图片会根据用户点击的链接而改变。
我需要在显示图像之前获取图像的宽度和高度,以便可以正确地格式化页面,但是.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");
});
}
答案 0 :(得分:1)
用户undefined向我指出了一个名为imagesLoaded的精彩gitHub插件,它完美地完成了这项任务。
离奇,真的。
在对MAMP和现场进行大量研究和讨论后,我选择lazyLoad来完成工作。主要是因为我的图像很大,但不是很大,他们需要预加载。