jQuery - 在文档准备就绪时仅隐藏可见图像(加载前)

Question

我正在开发一个Chrome扩展程序，并且需要一种功能，以便我希望尽快（在加载之前）获取所有可见图像，隐藏它们并设置一些属性。我一直在尝试这个：

$(document).ready(function () {
    $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', guid());
    });
});

但是在调试时，我注意到它甚至没有遍历循环。我在这里错过了什么？

Answer 1

所以，正如我在评论中提到的

如果元素占用文档中的空间，则认为这些元素是可见的。可见元素的宽度或高度大于零。

因此，您的选择之一是使用

$(window).on('load', function() { ... });

您也可以尝试其他方法，例如以下内容。

1. 为以后要为其设置属性的所有图像创建一个类。
2. 在 CSS 中将display:none;设置为该特定类。
3. 加载时（查看第一个选项），设置属性，然后通过删除类（推荐）或设置内联样式（不漂亮）来显示这些图像。

希望这是清楚的:)

Answer 2

$(document).ready(function (index) {
    $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', "test"); /*instead of guid().I think that function have some problem.Make sure it is defined or loaded properly*/
    });
});

问题出在你的 guid（） 函数上。此代码在火狐和铬上工作正常。请检查功能。如果问题没有解决，那么更新你的jquery如果它是离线的，否则请提供guid（）函数。

$(function(){
  //$("#btn").click(function(){
       $('img:visible').each(function() {
        $(this).css('visibility', 'hidden');
        $(this).attr('data-internalid', "test");
    });
  //  });
  
  });

img{
  width:100px;
  height:100px;
  margin:10px
}
span{
  display:block;
  cursor:pointer;
}

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<img src="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png">
<img src="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png">
<img src="http://www.clker.com/cliparts/w/o/d/I/G/A/smily-hi.png">
<span id="btn">Click me</span>

Answer 3

检查返回的内容$(this) ，为此使用控制台日志。