Question

这是一个简单的jquery脚本，它可以找到大于300px的图像并在段落中显示url。此代码在jsbin等在线编辑器网站上运行，但相同的代码无法在网站上运行。

<html>

<head>
    <script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>

<body>
    <main>
        <p>
        </p>
        <img src="http://icons.iconarchive.com/icons/icons-land/metro-raster-sport/128/Soccer-Ball-icon.png">
        <img src="http://www.iconarchive.com/download/i65352/icons-land/metro-raster-sport/American-Football-Ball.ico">
        <img src="http://simpleicon.com/wp-content/uploads/football.png">
    </main>
    <script>
        $(function() {

            $('main img').each(function() {
                $Height = 300;
                if ($(this).height() > $Height) {
                    $image = $(this).attr('src');
                    $('p').text($image);
                    return false;
                }
            });

        });
    </script>
</body>

</html>

但是如果你在jquery if语句中将只有大于号的符号更改为小于号，则脚本将在网站和在线编辑器上工作，并在每次刷新时显示图像URL。

如何使此脚本能够显示大于某些像素的图像网址？

我找到了一种让它在网站上运行的方式： 在

中运行脚本

$(window).on("load",function(){

}

Answer 1

一旦DOM准备好，jQuery代码就会执行 - 它不会等待加载图像！因此，当脚本搜索图像时，没有图像具有height。

刷新时，图像会立即从缓存中加载，以便jQuery捕获它们。

请查看this StackOverflow thread，了解如何触发您的功能以响应每个图片的onload事件！

如，

$('main img').on('load', function(){
    if ($(this).height() > 300)
        $('p').text($(this).attr('src'))
    ;
});

请注意，此代码应该补充您已经编写的代码，因为the jQuery documentation指出如果图像已经在缓存中，load事件将无法触发。

Answer 2

您的代码在加载图片之前有效。你应该给它一点延迟。试试这个;

$(function() {
   setTimeout(function(){
    $('main img').each(function() {      
        $Height = 300;
        if ($(this).height() > $Height) {
           $image=$(this).attr('src');
           $('p').text($image);
           return false; 
        }      
     });
   },150);
});

Answer 3

调用 .widht（）或 .height（）也会计算分配给该元素的填充。
尝试从元素中删除填充，或者您可以简单地从元素中减去填充即;

删除填充：

main > img{padding: 0;}

计算图像高度并删除填充：

 $(function() {
    $img = $('main img');
    $img.each(function() {
     var tp = parseInt($img.css('padding-top'), 10);
     var bp = parseInt($img.css('padding-bottom'), 10);
     $Height = 300;
     if ($(this).height() - (tp + bp) > $Height ) {
       $image=$(this).attr('src');
       $('p').text($image);
       return false; 
     }
   });

 });

希望这会有所帮助。：）

Answer 4

只需添加ant release，然后尝试。

注意：您的系统必须连接到互联网或为jquery.min.js提供系统文件网址

Answer 5

两个JSBin链接中的Javascript都是一样的，没有区别。

如果您希望您的功能正常工作，只需添加＆＃34; $（文档）.ready＆＃34;你的功能如： -

$( document ).ready(function() {
$('main img').each(function() {
  $Height = 300;
  if ($(this).height() > $Height) {
  $image=$(this).attr('src');
  $('p').text($image);
  return false; 
  }
});
});

希望，这对于web和＆amp; JSBin。请阅读： - https://learn.jquery.com/using-jquery-core/document-ready/

脚本不在网站上工作但是在JsBin上工作，Jsfiddle一次刷新

5 个答案: