Can't callback a function after .attr

Question

I wrote this according to: Controlling image load order in HTML

I replaced the 'src' changing with '.attr' function, and it can't callback anymore. It stopped after changing once:

This line:I.src = imgAddresses[counter];

Into this:$("#page"+counter).attr("data-bgimage",imgAddresses[counter]);

Can you help me? Thank you very much!

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);

Notice: "data-bgimage" is from FerroSlider jQuery Plugin. The div must use that for background-image.

it should be `$("#page"+counter).attr("src",imgAddresses[counter]);` — Think Different, Jan 20 '15 at 14:01
@Think Different: Sorry, the div use "data-bgimage" for background image, so I can't use the "src"... — Shiruhane, Jan 20 '15 at 14:06
@gotomanners: It should work on when the "counter+1", but I don't know why it stop. — Shiruhane, Jan 20 '15 at 14:07
Are you basically trying to load images into a page, and then use the FerroSlider with them? — rwacarter, Jan 20 '15 at 14:13
@ rwacarter: I'm trying to load the div's background-image in order. Each div is a slide using FerroSlider plugin. — Shiruhane, Jan 20 '15 at 14:17

gotomanners · Accepted Answer · 2015-01-20T15:52:11.577

Why its not working

You cannot use onload or onerror on <div> elements.

The onload event can only be used on the the following elements <body>, <frame>, <iframe>, <img>, <input type="image">, <link>, <script>, <style> ... basically elements containing external resources.

The <div>is not an external resource as it's loaded as part of the body, so the onload event doesn't apply there.

Some possible solutions

Without understanding your full requirements and limitiations, I can see that you could

Use <img> tags

Call your loadImage() function in a loop.

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

This may be overkill but you can use DOM Mutation Observers which will notify you every time the dom change

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);

Try it out in this fiddle http://jsfiddle.net/gotomanners/sogzy5yy/

Thank you for letting me know. I don't really know coding so... I'm trying to load the background-image in order. Is there any other way? — Shiruhane, Jan 20 '15 at 14:15
Thank you gotomanners. I tried all the solution and sorry, can't work. But well, after all the ideas, I've found a work-around way with img tag. Thank you so much everyone! — Shiruhane, Jan 21 '15 at 16:31

James Richford · Answer 2 · 2015-01-20T14:37:34.380

0

If you are trying to edit a data-* attribute you should use .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/

edited Jan 20 '15 at 14:37

answered Jan 20 '15 at 14:14

James Richford

99
2
7

Sorry, it doesn't work, it's not a data-* attribute :) – Shiruhane Jan 20 '15 at 14:26
Any attribute starting with "data-" is considered a data attribute, check it out here :) https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes Also just edited the entire code as it looks like the callbacks you are using will not work so instead popped it in a for loop to load all the imgAddresses into the data-bgimage attributes – James Richford Jan 20 '15 at 14:34
Thank you. Somehow, all the images load at the same time. I can't make it load in order like 1st loaded then 2nd load. My images are in HD so I try to make them load sequentially. – Shiruhane Jan 20 '15 at 14:53

Can't callback a function after .attr

2 Answers2