jQuery

Question

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

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

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

Answer 1

检查一下 returns $(this), 使用控制台日志。

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() function.This 代码在 firefox 上工作正常，chrome.Please 检查 function.If 问题没有解决，然后更新你的 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

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

Elements are considered visible if they consume space in the document. Visible elements have a width or height that is greater than zero.

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

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

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

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

希望说的很清楚:)

jQuery - 文档就绪时仅隐藏可见图像（加载前）

jQuery - hide only visible images (before load) on document ready

javascript

image

hide

google-chrome-extension