javascript - Rails / javascript试图隐藏没有特定宽度的图像

Question

我正在尝试从 url 中抓取图像，并且只允许用户选择特定大小的图像。我在让它与 Nokogirl 一起工作时遇到问题，并考虑在出现选择图像的页面时使用 jquery 在客户端处理它。由于某种原因，它不能 100% 工作

.select_product 是呈现图像供用户选择的图像类的名称。

$(document).ready(function () {
    $("img").load(function () {
        $(".select_product").each(function () {
            var width = $(this).width();
            if (width < 100) {
                $(this).hide();
            }
        });
    });
});

这个 js 有效，但由于某种原因，它总是将“this”上的宽度视为宽度 < 100，而实际上某些图像肯定更高。

Answer 1

load每个图像都会触发一次事件，假设您有 10 张图像，它会触发 10 次，当加载第一个图像时，即使尚未加载其他图像，也会执行处理程序，您可以改为监听对象的load事件window：

window.onload = function() {
    $(".select_product").filter(function() {
       return $(this).width() < 100;
    }).hide();
}

但是我会在服务器端读取图像的宽度，而不是加载然后隐藏它们，还要注意load()jQuery 1.8 的 jQuery 事件方法已被弃用。