Question

我有以下结构：

<div class="holder">
    <div class="image_inner imageFill6"></div>
    <img class="listImage" src="/images/production/5562.jpg">
</div>

我希望类.image_inner的div在加载类.listImage的图像时淡出。

页面上会有很多这样的实例。

这就是我正在尝试但它没有淡出.image_inner

$(window).on('load', function() { 
    $(".listImage").on('load', function () {
        $(this).siblings('.image_inner').fadeOut();
    });     
});

Answer 1

请注意jQuery documentation中的相当多的警告：

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

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


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

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

它没有正确地冒泡DOM树

可以停止触发已存在于浏览器缓存中的图像

你有信心能够克服这些吗？

Answer 2

原因是当窗口加载事件被触发时，所有图像都已加载，因此它们的加载事件不会再被触发。尝试

jQuery(function ($) {
    $(".listImage").on('load', function () {
        $(this).siblings('.image_inner').fadeOut();
    }).filter(function () {
        //trigger the load event for images which are already loaded
        retun this.complete;
    }).trigger('load');
});

Answer 3

您的代码运行正常。

$(".listImage").on('load', function () {
    $(this).siblings('.image_inner').fadeOut();
});

你需要在身体的末尾调用JS。请看一下jsFiddle：http://jsfiddle.net/giri_jeedigunta/3vkXQ/

图像加载时删除兄弟姐妹

3 个答案: