jQuery - 仅在文档准备好时隐藏可见图像（加载前）答案

【问题标题】：jQuery - hide only visible images (before load) on document readyjQuery - 仅在文档准备好时隐藏可见图像（加载前）
【发布时间】：2015-06-29 20:37:23
【问题描述】：

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

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

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

【问题讨论】：

你试过检查$('img:visible')返回什么？
它返回这个 [prevObject: n.fn.init[1], context: document, selector: "img:visible", jquery: "2.1.3", constructor: function...]context:文档长度：0prevObject：n.fn.init[1]选择器：“img:visible”proto：n[0]
可能会尝试另一种选择 => 1) 为您想要设置属性的图像设置一个类，2) 在 CSS 中将 display:none; 设置为该类，3) 在加载时，设置您的属性，然后显示这些图像。
此外，来自文档：如果元素占用了文档中的空间，则它们被认为是可见的。可见元素的宽度或高度大于零。。因此，在文档准备就绪时，所有图像都没有加载，这可能是失败的原因。你可能想试试$(window).on('load', ...
@LShetty 你应该把它变成一个答案

标签： javascript jquery image google-chrome-extension hide

【解决方案1】：

所以，正如我在我的 cmets 中提到的

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

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

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

您也可以尝试以下替代方法。

为以后要为其设置属性的所有图像创建一个类。
将 display:none; 设置为 CSS 中的特定类。
加载时（查看第一个选项），设置属性，然后显示这些图像，方法是删除类（推荐）或设置内联样式（不美观）。

希望这很清楚:)

【讨论】：

【解决方案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() 函数上。此代码在 firefox 和 chrome 上运行良好。请检查该函数。如果问题未解决，则更新您的 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>

【讨论】：

正如我所说，它根本不会遍历循环。该功能非常简单，并且加载正确。
那是在 chrome 和 firefox 中测试的
我没有让它“没用”，为了问，我只是尝试了一下，但它没有用。我也评论了那行，但还是一样。
K.Sory 为此。现在检查一下。然后运行代码 sn-p。
$(function(){}) 是 $(document).ready(function(){}) 的简写

【解决方案3】：

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

【讨论】：