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. 設置display:none; 到CSS中的特定類。
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（）函數上。此代碼在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> 

Answer 3

檢查返回$(this) ，並使用控制台日志。