Javascript——操作动态加载(或自动分页）内容的属性

Javascript — manipulating attributes of dynamically loaded (or autopaged) content

本文关键字：属性 自动分页 操作 动态 加载 Javascript      更新时间：2023-09-26

Mega Edit--我已经尽可能清楚地解释了我的问题。

我的目标是：将新加载的图像的高度设置为与浏览器相同的大小，如果它们的高度比浏览器高。

我认为，我能做到这一点的最好方法是通过注释代码。目前正在直播http://syndex.me.

以下成绩单的完整js文件可以在http://marckremers.com/syndex/js/jquery.infinitescrollfortumblr.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;
    }

提前谢谢。

可能是因为myDivs包含一个NodeList，一个类似数组的对象，包含对匹配元素的索引引用，而该对象没有getAttribute()成员。

相反，为单个元素(使用[n]或item(n)(添加下标，将使用getAttribute()方法。或者只使用width属性。

您的代码有故障：

> myDivs = tAP.pp.getElementsByTagName("img");

getElementsByTagName返回一个活动NodeList。

> myWidths = myDivs.getAttribute("width");

NodeLists没有getAttribute方法，DOM元素有。

在任何情况下，访问属性都要高效得多，因此：

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';

诚然，直到我读了这篇文章，我才知道计算样式，所以不幸的是，我真的不能评论这里还说了什么。(我保证之后再读一遍(。

关于事件委派，您是对的，因为它是一个"简单"事件，不会冒泡，所以您不能将jQuery live(((或等效的(绑定到img加载事件。因此，您必须手动将加载事件添加到每个单独的图像中。

唯一真正棘手的部分是确保您考虑到已经缓存的图像。这里有一种方法。

我重新创建了一个精简的、静态的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>
相关文章：