jQuery - 在文档准备好时只隐藏可见图像（加载前） [英] jQuery - hide only visible images (before load) on document ready

问题描述

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

I'm developing a Chrome extension, and require a functionality such that I want to get all visible images as soon as possible (before they load), hide them and set some attribute. I've been trying this:

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

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

But while debugging, I noticed that it's not even iterating through the loop. What I'm missing here?

推荐答案

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

So, as I mentioned in my comments

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

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

因此，您可以使用其中一个选项

So, one of your options would be to use

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

您也可以尝试其他选择，例如以下内容。

You may also try an alternative, such as the following.

1. 为您稍后要设置属性的所有图像创建一个类。


2. 设置显示：无; 到CSS中的特定类。


3. 在加载时（查看第一个选项），设置属性然后显示这些图像，方法是删除class（推荐）或设置内联样式（不漂亮）。

1. Have a class for all the images you'd later like to set attributes to.
2. Set display:none; to that particular class in CSS.
3. On load (look at the first option), set your attributes and then display those images, either by removing the class (recommended) or setting inline styles (not pretty).

希望很清楚：）

这篇关于jQuery - 在文档准备好时只隐藏可见图像（加载前）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！