Question

我有以下代码可在两种显示图像的方式中进行选择：

slider.find("img").each(function() {
    $(this).on("load", function() {
        console.log($(this).attr("src"));
        var imgW = $(this).width(),
            imgH = $(this).height();

        console.log("width: "+imgW+" + height: "+imgH);

        if (imgW/imgH <= sliderW/sliderH) {
            $(this).removeClass("slide-responsive").addClass("img-responsive");
        } else {
            $(this).addClass("slide-responsive").removeClass("img-responsive");
        }
    });
});

如果图像的比例大于其显示空间的比例，则基本上使用一个类，如果不是，则基本上使用另一个类。

我正在使用.on（“加载”）来检测图像的加载时间，因为它应该只能识别加载图像的宽度和高度。

我遇到的问题是它只适用于本地存储的图像，但不适用于从互联网上加载的其他图像。对于外部图像，它始终返回宽度和高度为0.

有2个console.log命令可以验证1）它确实选择了正确的图像（我检查了src属性），以及2）检测到的大小。 1）工作正常，所以我知道选择器没问题。

我的猜测是我没有正确使用（“加载”），但我不知道jQuery文档有什么问题。我从哪里开始？

Answer 1

可能答案是您忘记触发on功能。而不是.load .on需要触发器。

这可能意味着您有2个选项。

使用.load

slider.find("img").each(function() {
    $(this).load(function() {
        console.log($(this).attr("src"));
        var imgW = $(this).width(),
            imgH = $(this).height();

        console.log("width: "+imgW+" + height: "+imgH);

        if (imgW/imgH <= sliderW/sliderH) {
            $(this).removeClass("slide-responsive").addClass("img-responsive");
        } else {
            $(this).addClass("slide-responsive").removeClass("img-responsive");
        }
    });
});

或使用触发器：

slider.find("img").each(function() {
    $(this).on("load", function() {
        console.log($(this).attr("src"));
        var imgW = $(this).width(),
            imgH = $(this).height();

        console.log("width: "+imgW+" + height: "+imgH);

        if (imgW/imgH <= sliderW/sliderH) {
            $(this).removeClass("slide-responsive").addClass("img-responsive");
        } else {
            $(this).addClass("slide-responsive").removeClass("img-responsive");
        }
    });
}).trigger("load")

Answer 2

图片上有display: none或visibility: hidden吗？

如果是这样，这可能会导致jQuery检测到元素的问题，特别是如果它有display: none。

Answer 3

正如jQuery文档http://api.jquery.com/load-event/中所述，使用.load()图片可能会出现问题：

与图片一起使用时加载事件的注意事项

开发人员尝试使用.load（）解决的常见问题   快捷方式是在图像（或集合）时执行函数   图像）已完全加载。有几个已知的警告   这应该注意。这些是：


它不能始终如一地工作，也不能可靠地跨浏览器

如果图像src设置为与之前相同的src，它在WebKit中无法正确触发

它没有正确地冒泡DOM树可以停止为已经存在于浏览器缓存中的图像触发

jQuery没有检测到何时加载图像

3 个答案: