Mega Edit - 我试图尽可能清楚地解释我的问题。
我的目标：将新加载的图片的高度设置为与浏览器相同的大小，如果的高度更高而不是浏览器。
我能做到的最佳方式是通过我认为的评论代码。 目前它位于http://syndex.me。
可以通过http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.js
访问以下成绩单的完整js文件 //Gets the computed style of the image rather than the specified.
//This was supplied very kindly by @RobG
//The problem is that on first load, the height for the image is showing as 0 for the larger images.
//Once it's cached, the functions shows the correct height.
//I have no idea how to make this function work on a "on Ready" or "On Loaded"?
function getComputedStyle(el, styleProperty) {
if (document && document.defaultView && document.defaultView.getComputedStyle) {
var styleObj = document.defaultView.getComputedStyle(el, null);
var floatStyle = (typeof document.body.style.cssFloat == 'string')?'cssFloat':'styleFloat';
if (styleProperty == 'float') styleProperty = floatStyle;
return styleObj && styleObj[styleProperty];
}
}
function addNextPage(oj) {
if (oj.status == 404) {
tAP.remainFlg = false;
return;
}
var d = document.createElement("div");
d.innerHTML = oj.responseText;
var posts = tAP.gP(d.getElementsByTagName("*"));
if (posts.length < 2) {
tAP.rF = false;
return;
}
d = document.createElement("div");
d.className = "tumblrAutoPager_page_info";
tAP.pp.appendChild(d);
for (var i = 0; i < posts.length; i++) {
//Goal: Set newly loaded images via this autopager script for tumblr
// to the height of the browser
// (So... IF the image is taller than the browser
// Make the image as tall as the browser)
// In effect I'm trying to make a dynamic image max-height based on the browser
// This is loading the new posts (part of the autopager script, not my code)
tAP.pp.appendChild(posts[i]);
//Over here I'm trying to reference the newly loaded imgs
//BUT this is a horrible way of getting them, apprently.
//It gets all the imgs in the entire document.
//But it seems to work for my array below, anyhow
//I really just need to deal with the new ones loaded in.
var myDivs = tAP.pp.getElementsByTagName("img");
}
var myHeights = [];
for (var n=0, iLen=myDivs.length; n<iLen; n++) {
myHeights.push(getComputedStyle(myDivs[n], 'height'));
}
console.log(myHeights)
//= I get an array of image heights, however the newly loaded imgs often show up as 0
// so the "getcomputedstyle" script is not working as it should yet.
//once the page is cached, it works as it should
//you can see the console logs here http://syndex.me
//Over here would go:
//"for each image
// if my height is taller then the window
// make me as tall as the window"
//Finally, I have this working PERFECTLY in the jquery code
//you can see it at http://syndex.me on the first page load.
//since you can't bind .live or .delegate to events that don't "bubble"
//up the DOM tree, i.e. ".load", I can't get it to recognise
//newly loaded images from this script
//thats why i'm having to hack this file
var footer = $("footer");
footer ? footer.parentNode.appendChild(footer) : null;
tAP.rF = true;
}
提前致谢。
答案 0 :(得分：1)
可能是因为myDivs包含NodeList，一个类似于对象的数组，其中包含对匹配元素的索引引用，但没有getAttribute()成员。
相反，下标单个元素（使用[n]或item(n)），其中将具有getAttribute()方法。或者只使用width属性。
答案 1 :(得分：1)
您的代码有问题：
> myDivs = tAP.pp.getElementsByTagName("img");
getElementsByTagName返回实时NodeList。
> myWidths = myDivs.getAttribute("width");
NodeLists没有 getAttribute 方法，DOM elements。
无论如何，访问该属性的效率要高得多，所以：
var myWidths = [];
for (var i=0, iLen=myDivs.length; i<iLen; i++) {
myWidths.push(myDivs[i].width);
}
但是，除了图像以外的元素通常只有一个width属性，如果它已被设置为属性或属性。您可能在计算样式之后，例如
<script type="text/javascript">
function getActualWidth(el, styleProperty) {
if (document && document.defaultView && document.defaultView.getComputedStyle) {
var styleObj = document.defaultView.getComputedStyle(el, null);
var floatStyle = (typeof document.body.style.cssFloat == 'string')?'cssFloat':'styleFloat';
if (styleProperty == 'float') styleProperty = floatStyle;
return styleObj && styleObj[styleProperty];
}
}
</script>
<div onclick="alert(getActualWidth(this, 'width'));">div</div>
这可以让你获得宽度。要更改宽度，只需直接设置：
element.style.width = '500px';
答案 2 :(得分：1)
不可否认，在我阅读这篇文章之前，我从未知道计算机样式，所以不幸的是我无法评论这里还有什么说法。 （在我保证之后去读它）。
你认为事件委托是正确的，你不能将jQuery live（）（或等效的）绑定到img加载事件，因为它是一个“简单”事件而且不会冒泡。所以afaik你必须手动将加载事件添加到每个单独的图像。
唯一真正棘手的部分是确保您考虑已经缓存的图像。这是one approach。
我重新创建了tumblr页面的精简版静态版本，其中包含一个附加另一个图像的按钮，这基本上是您的addNextPage()调用。希望它有所帮助。
http://dl.dropbox.com/u/15924676/syndex/index.html
<!DOCTYPE html>
<html>
<head>
<title>Syndex</title>
<script type="text/javascript" src="./Syndex_files/jquery-latest.min.js"></script>
<link rel="stylesheet" type="text/css" href="./Syndex_files/style.css" media="screen">
</head>
<body>
<div>
<input type="button" value="add image" />
</div>
<div id="posts">
<div class="autopagerize_page_element">
</div>
</div>
</body>
<script>
var $window = $(window);
var $pageImages;
var images = [
'<div id="10823012653" rel="http://www.tumblr.com/reblog/10823012653/ymaZUCKg" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb37adUwD1r4306n" alt="Olaf Breuning"><div class="kremers">original height 701</div></div></div>',
'<div id="10822915844" rel="http://www.tumblr.com/reblog/10822915844/JknV8s3a" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb33m4S7j1r4306no1_400.png" alt="Jacqueline Casey, Graphic Designer for MIT 1963 - 1990"><div class="kremers">original height 500</div></div></div>',
'<div id="10822870581" rel="http://www.tumblr.com/reblog/10822870581/oJMKWl9k" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb31sUYvQ1r4306n" alt="Vanessa Veasley x Supreme x Terry Richardson"><div class="kremers">original height 1280</div></div></div>',
'<div id="10822380405" rel="http://www.tumblr.com/reblog/10822380405/AwsPNE5L" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb2ivLTWQ1r4306n" alt="Xavier Delory - Habitat"><div class="kremers">original height 857</div></div></div>',
'<div id="10822233573" rel="http://www.tumblr.com/reblog/10822233573/9OTI6gLl" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb2d6sESW1r4306n" alt="Yellow Smoke Bomb"><div class="kremers">original height 900</div></div></div>',
'<div id="10822153538" rel="http://www.tumblr.com/reblog/10822153538/GhQQOncG" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb2a3Gh2L1r4306n" alt="Karl Gerstner - Colour Sounds"><div class="kremers">original height 1024</div></div></div>',
'<div id="10822119380" rel="http://www.tumblr.com/reblog/10822119380/mTyZ3yoh" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb28q4g7p1r4306n" alt="Karl Gerstner - Colour Sounds"><div class="kremers">original height 1024</div></div></div>',
'<div id="10822031937" rel="http://www.tumblr.com/reblog/10822031937/OoqboZsY" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb258iApO1r4306n" alt="Cindy Sherman - Untitled Film Still #45"><div class="kremers">original height 920</div></div></div>',
'<div id="10821751285" rel="http://www.tumblr.com/reblog/10821751285/LlXg7AsU" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb1u2045A1r4306n" alt="Jeff Koons - Rabbit (1986)"><div class="kremers">original height 1280</div></div></div>',
'<div id="10821655695" rel="http://www.tumblr.com/reblog/10821655695/RBKyq24s" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb1q8whpQ1r4306n" alt="Disabled Car Access"><div class="kremers">original height 757</div>/div></div>',
'<div id="10821572995" rel="http://www.tumblr.com/reblog/10821572995/JYWoYWR6" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb1mw5IU11r4306n" alt="Bin Bags"><div class="kremers">original height 725</div></div></div>',
'<div id="10821503505" rel="http://www.tumblr.com/reblog/10821503505/hVLYhypW" class="post photo"><div class="theImage"><img src="./Syndex_files/tumblr_lsb1k3yEsf1r4306no1_400.png" alt="Untitled"><div class="kremers">original height 326</div></div></div>'
];
$(document).ready(function() {
$('input').click(function(e){
e.preventDefault();
if (images.length > 0) {
// append first image in array to DOM
$(images[0])
.appendTo('.autopagerize_page_element')
// select img elements from appended items
.find('img').each(function(e) {
// lets hide the description as well while we're at it
$(this).parent().find('.kremers').hide();
// hide image from the DOM
$(this).hide();
// check to see if our image has been cached
// source: https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
$(this).one('load', function() {
imageLoadHandler($(this));
}).each(function() {
if(this.complete) {
// (image is cached)
// console.log("cached");
$(this).load();
}
});
}
);
// remove first element from array
images.shift();
// update our reference to all nested images
$pageImages = $('.autopagerize_page_element img');
} else {
// disable input (jQuery 1.6+)
$(this).prop('disabled', true);
}
});
$(window).resize(function(e){
// TODO: look into throttling these calls as it doesn't need to be called so often
// potentially with the use of something like jQuery throttle / debounce
// http://benalman.com/projects/jquery-throttle-debounce-plugin/
// add your resize code here
$pageImages.each(function(){
// resize all images to browser height
$(this).height($window.height());
});
});
});
function imageLoadHandler($img){
// resize to browser window height, even images that are initially smaller than browser window height
$img.height($window.height());
/*
// OR...
// check if this image is taller than our browser window
if ($img.height() > $window.height()) {
// resize to browser window height
$img.height($window.height());
} else {
// our image is smaller than the browser height, we don't need to do anything
}
*/
// reveal the image in the DOM
// (fade in, animate in, do whatever else you want here)
$img.show();
// finally show our description again
$img.parent().find('.kremers').show();
}
</script>
</html>