jquery - 加载图像 jquery 后添加类

Question

我有以下代码在加载图像后添加一个类：

$('.single aside img').attr('src', 'assets/img/ajax-loader.gif');

$('.single aside img').attr('src', url).load(function () {  
    $('.single aside img').addClass('loaded');
});

但它不起作用，它在加载之前添加了类。有任何想法吗？

Answer 1

我认为您的代码有问题的主要问题是，在您的回调函数中，您使用的选择器与您最初使用的选择器相同。

您要做的是引用已加载的实际元素。为此，您可以使用$(this)关键字。

$('.single aside img').attr('src', url).load(function () {  
  $(this).addClass('loaded');
});

// another interpretation of the code...
// var loaded = 'loadedClass';
// $('.single aside img').attr('src', url).load(function () {  
//   $(this).addClass(loaded);
// });

您的代码中还缺少引号，但我怀疑这只是复制粘贴错误，所以我忽略了它。

Answer 2

该load方法用于从服务器（Ajax 调用）获取数据，您可以在此处看到：http: //api.jquery.com/load/。您必须将load事件绑定到您的图像。

var loaded = 'loadedClass';
$('.single aside img').attr('src', url).bind('load', function () {
    $(this).addClass(loaded);
});