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

Javascript—；操作动态加载（或自动分页）内容的属性
javascript
Javascript—；操作动态加载（或自动分页）内容的属性,javascript,Javascript,超级编辑-我已经尽可能清楚地解释了我的问题我的目标：如果新加载图像的高度高于浏览器，则将其高度设置为与浏览器相同的大小我认为最好的方法是通过注释代码。目前正在直播以下成绩单摘自的完整js文件可访问 //获取图像的计算样式，而不是指定的样式。 //这是@RobG非常友好地提供的 //问题是，在第一次加载时，对于较大的图像，图像的高度显示为0。 //缓存后，函数将显示正确的高度。 //我不知道如何使这个函数在“on Ready”或“on Loaded”上工作？函数getComputedSt
超级编辑-我已经尽可能清楚地解释了我的问题
我的目标：如果新加载图像的高度高于浏览器，则将其高度设置为与浏览器相同的大小
我认为最好的方法是通过注释代码。目前正在直播
以下成绩单摘自的完整js文件可访问
//获取图像的计算样式，而不是指定的样式。
//这是@RobG非常友好地提供的
//问题是，在第一次加载时，对于较大的图像，图像的高度显示为0。
//缓存后，函数将显示正确的高度。
//我不知道如何使这个函数在“on Ready”或“on Loaded”上工作？
函数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'；
如果（styleProperty=='float'）styleProperty=floatStyle；
返回styleObj&&styleObj[styleProperty]；
}
}
功能添加下一页（oj）{
如果（oj.status==404）{
tAP.remainFlg=false；
返回；
}
var d=document.createElement（“div”）；
d、 innerHTML=oj.responseText；
var posts=tAP.gP（d.getElementsByTagName（“*”）；
如果（桩长<2）{
tAP.rF=假；
返回；
}
d=document.createElement（“div”）；
d、 className=“tumblrAutoPager\u页面信息”；
tAP.pp.1（d）；
对于（变量i=0；i对于（var n=0，iLen=myDivs.length；n可能是因为myDivs
包含一个类似数组的对象，该对象包含对匹配元素的索引引用，而该对象没有getAttribute（）
成员
取而代之的是，为单个元素下标（使用[n]
或项（n）
），这些元素将有一个getAttribute（）
方法。或者只使用width
属性。
可能是因为myDivs
包含类似数组的对象，该对象包含对匹配元素的索引引用，而该对象没有getAttribute（）
成员
相反，为单个元素（使用[n]
或项（n）
）下标，这些元素将具有getAttribute（）
方法。或者只使用width
属性。
您的代码有错误：
> myDivs = tAP.pp.getElementsByTagName("img");

返回一个live
节点列表没有getAttribute方法，可以
在任何情况下，访问该物业的效率都要高得多，因此：
var myWidths = [];
for (var i=0, iLen=myDivs.length; i<iLen; i++) {
  myWidths.push(myDivs[i].width);
}

您的代码有错误：
> myDivs = tAP.pp.getElementsByTagName("img");

返回一个live
节点列表没有getAttribute方法，可以
在任何情况下，访问该物业的效率都要高得多，因此：
var myWidths = [];
for (var i=0, iLen=myDivs.length; i<iLen; i++) {
  myWidths.push(myDivs[i].width);
}

诚然，在我读到这篇文章之前，我从来都不知道计算风格，所以不幸的是，我真的无法对这里所说的其他内容发表评论。（我保证，以后会仔细阅读）
关于事件委派，您是对的，因为您不能将jQuery live（）（或等效项）绑定到img加载事件，因为它是一个“简单”事件，不会冒泡。因此，您必须手动将加载事件添加到每个单独的映像中
唯一真正棘手的部分是确保您考虑已经缓存的图像
我重新创建了tumblr页面的精简静态版本，其中有一个按钮附加了另一个图像，基本上就是您的addNextPage（）
调用。希望能有所帮助


综合指数
变量$window=$（window）；
var$pageImages；
变量图像=[
‘原始高度701’，
“原始高度500”，
“原始高度1280”，
“原始高度857”，
“原始高度900”，
'原始高度1024'，
'原始高度1024'，
“原始高度920”，
“原始高度1280”，
“原始高度757/div>”，
“原始高度725”，
“原始高度326”
];
$（文档）.ready（函数（）{
$（“输入”）。单击（函数（e）{
e、 预防默认值（）；
如果（images.length>0）{
//将数组中的第一个图像追加到DOM
$（图像[0]）
.appendTo（'.autotagize\u page\u元素'）
//从附加项中选择img元素
.find（'img'）。每个（函数（e）{
//让我们在进行描述时也隐藏描述
$（this.parent（）.find（'.kremers'）.hide（）；
//从DOM中隐藏图像
$（this.hide（）；
//检查图像是否已缓存
//资料来源：https://stackoverflow.com/questions/3877027/jquery-callback-on-image-load-even-when-the-image-is-cached
$（this）.one（'load'，
  <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';

<!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>