.attr 后无法回调函数答案

【问题标题】：Can't callback a function after .attr.attr 后无法回调函数
【发布时间】：2023-03-11 15:18:01
【问题描述】：

我是根据：Controlling image load order in HTML写的

我用'.attr'函数替换了'src'变化，它不能再回调了。换一次就停了：

此行：I.src = imgAddresses[counter];

进入这个：$("#page"+counter).attr("data-bgimage",imgAddresses[counter]);

你能帮帮我吗？非常感谢！

HTML：

    <div id="intro" class="slidingSpaces demo0" data-bgimage='' title="Intro">
        <p>Hello</p>
    <div id="page0" class="slidingSpaces demo0" data-bgimage='' title="Cover">
        </div>
    <div id="page1" class="slidingSpaces demo0" data-bgimage='' title="01">
        </div>
    <div id="page2" class="slidingSpaces demo0" data-bgimage='' title="02">
        </div>

JS：

var imgAddresses = ['img1.png','img2.png','img3.png'];

function loadImage(counter) {
  //Break out if no more images
  if(counter==imgAddresses.length) { return; }

  //Grab an image obj
  var I = document.getElementById("page"+counter);

  //Monitor load or error events, moving on to next image in either case
  I.onload = I.onerror = function() { loadImage(counter+1); },

  //Change source (then wait for event)
  $("#page"+counter).attr("data-bgimage",imgAddresses[counter]);

}

loadImage(0);

注意：“data-bgimage”来自FerroSlider jQuery Plugin. div 必须将其用于背景图像。

【问题讨论】：

应该是$("#page"+counter).attr("src",imgAddresses[counter]);
回调在哪里？
@Think Different：抱歉，div 使用“data-bgimage”作为背景图片，所以我不能使用“src”...
@gotomanners：它应该在“counter+1”时起作用，但我不知道为什么它停止了。
您是在尝试将图像加载到页面中，然后将 FerroSlider 与它们一起使用吗？

标签： javascript jquery

【解决方案1】：

为什么它不起作用

您不能在 <div> 元素上使用 onload 或 onerror。

onload 事件只能用于以下元素 <body>、<frame>、<iframe>、<img>、<input type="image">、<link>、<script>、<style> ...基本上是包含外部资源的元素。

<div> 不是外部资源，因为它是作为正文的一部分加载的，因此 onload 事件不适用于那里。

一些可能的解决方案

在不了解您的全部要求和限制的情况下，我可以看到您可以

使用<img>标签

循环调用您的loadImage() 函数。

for(var i=0; i < imgAddresses.length; i++) {
    loadImage(i);
}

这可能有点矫枉过正，但您可以使用DOM Mutation Observers，它会在每次 dom 更改时通知您

var imgAddresses = ['img1.png', 'img2.png', 'img3.png'];
var observers = [];

function loadImage(counter) {
    //Break out and clean up if no more images
    if (counter === imgAddresses.length) {
        observers.forEach(function (observer) {
            // later, you can stop observing
            observer.disconnect();
        });
        //delete observers array
        observers.splice(0, counter);
        return;
    }

    var target = document.querySelector("#page" + counter);

    // create an observer instance
    var observer = new MutationObserver(function (mutations) {
        mutations.forEach(function (mutation) {
            console.log("page " + counter + " changed", mutation.target);
            loadImage(counter + 1);
        });
    });
    observers.push(observer);

    // configuration of the observer:
    var config = {
        attributes: true, // monitoring attrs only
        childList: false,
        characterData: false
    };

    // pass in the target node, as well as the observer options
    observer.observe(target, config);

    //Change attr (then wait for observer to pick up change)
    $(target).attr("data-bgimage", imgAddresses[counter]);
}

loadImage(0);

在这个小提琴中尝试一下http://jsfiddle.net/gotomanners/sogzy5yy/

【讨论】：

感谢您告诉我。我真的不知道编码所以......我正在尝试按顺序加载背景图像。有没有其他办法？
谢谢 gotomanners。我尝试了所有解决方案，抱歉，无法工作。但是，在所有的想法之后，我找到了一种使用 img 标签的解决方法。非常感谢大家！

【解决方案2】：

如果您尝试编辑 data-* 属性，您应该使用 .data()

var imgAddresses = ['img1.png', 'img2.png', 'img3.png'];

function loadImage(images) {
    for(var i = 0; i < imgAddresses.length; i++){
        $('#page' + i).data('bgimage', imgAddresses[i]);
    }

}

loadImage(imgAddresses);

http://api.jquery.com/data/

【讨论】：

对不起，它不起作用，它不是 data-* 属性:)
任何以“data-”开头的属性都被认为是数据属性，在这里查看:) developer.mozilla.org/en-US/docs/Web/Guide/HTML/… 也刚刚编辑了整个代码，因为看起来您使用的回调不起作用所以而是在 for 循环中弹出它以将所有 imgAddresses 加载到 data-bgimage 属性中
谢谢。不知何故，所有图像同时加载。我不能让它按第一次加载然后第二次加载的顺序加载。我的图像是高清的，所以我尝试让它们按顺序加载。