Question

如果我有以下内容：

<img src="filler.jpg" class="imgClass" delays="otherImage.jpg" delayw="400" delayw="600" delayt="Loaded">
<img src="filler.jpg" class="imgClass" delays="otherImage2.jpg" delayw="450" delayw="600" delayt="Loaded 2">

$(document).ready(function() {
    $(".imgClass").each(function(){
        $(this).attr("src", $(this).attr("delays"));
        $(this).attr("width", $(this).attr("delayw"));
        $(this).attr("height", $(this).attr("delayh"));
        $(this).attr("title", $(this).attr("delayt"));
     });
})

有没有一种方法可以让宽度，高度和标题属性仅在src属性更改后更改？使用上面的代码，它们似乎都在同一时间发生变化。在一个完美的世界里，我希望他们一次发生一个。至少我希望src改变，然后其他三个改变，因为src改变需要一点点时间。

Answer 1

您可以使用.onload回调。这是一个没有jQuery的版本：

var img = document.getElementsByClassName('imgClass');
for (var i = 0, n = img.length; i < n; ++i) {
     var el = img[i];
     el.onload = function() {
         this.width = this.getAttribute('delayw');
         this.height = this.getAttribute('delayh');
         this.title = this.getAttribute('delayt');
     };
     el.src = this.getAttribute('delays');
});

注意：要获得更好的HTML5兼容性，请使用data-foo属性，而不是自己制作。

Answer 2

检索到图像后会触发load事件：

$(".imgClass").each(function(){
    this.src = $(this).attr("delays"));
}).one('load', function() {  // `.one` executes the event handler only once
    var $this = $(this);
    $this.attr({
        width: $this.attr('delayw'),
        height: $this.attr('delayh'),
        title: $this.attr('delayt')
    });
});

为DOM属性分配值通常比分配给HTML属性更受欢迎，因此您可能需要考虑使用.prop而不是.attr。

Answer 3

你可以这样做 -

$(".imgClass").each(function(){
        $(this).attr("src", $(this).attr("delays"));
        $(this).on('load',function(){
          $(this).attr("width", $(this).attr("delayw"));
          $(this).attr("height", $(this).attr("delayh"));
          $(this).attr("title", $(this).attr("delayt"));
        })
})

是否可以异步更改jQuery的一系列属性？

3 个答案: