[javascript] img onerror

[Milmoor]

Op mijn website vang ik af als een plaatje niet bestaat via onerror. Dit doet in Internet Explorer raar. als ik dit via een attribuut instel werkt het altijd, en via image.onerror werkt het alleen op de eerste paar plaatjes. Ik snap niet waarom daar een beperking in aantal zit. Iemand een goed idee?

code:

        image.setAttribute("onerror","this.src = 'images/website/no-image-available-th.png';this.style.width = '50px';this.style.height = '50px';");
        //TODO: find out why the method below isn't working in IE, at least not after the first few images (timing issue?)
        /*
                image.onerror = function () {
                    this.src = 'images/website/no-image-available-th.png';
                    this.style.width = "80px";
                    this.style.height = "80px";
                };
        */

[MoietyMe]

Kan aan mij liggen, maar ik zie nergens iets staan waardoor je het script voor elk plaatje uitvoerd.

[RobIII]

Good Fella schreef op woensdag 27 november 2013 @ 16:51:
Kan aan mij liggen, maar ik zie nergens iets staan waardoor je het script voor elk plaatje uitvoerd.

Hang er een beetje vanaf; voor 'tzelfde geld is image iets als: var image = $('body img'); ofzo. Maar 't is wel handig om dat even te zien ja.

[Milmoor]

Een wat uitgebreider stuk van de code, ik was bang dat dit te verwarrend zou zijn:

code:

    for (currentItem=startItem; currentItem < stopItem; currentItem++){
        currentFileName = listOfFileNames[currentItem];
        diaryEntry = newElement("div", "", "item", currentFileName);
        diaryEntry.style.display = 'none';
        diaryEntry.appendChild(newElement("div", "", "entryheader", "", blockNr + "." + (currentItem)));
        image = new Image();
        image.style.width = "100%";
        image.style.height = "auto";
        // http://www.clker.com/clipart-no-image-available.html
        image.setAttribute("onerror","this.src = 'images/website/no-image-available-th.png';this.style.width = '50px';this.style.height = '50px';");
        //TODO: find out why the method below isn't working in IE, at least not after the first few images (timing issue?)
        /*
                image.onerror = function () {
                    this.src = 'images/website/no-image-available-th.png';
                    this.style.width = "80px";
                    this.style.height = "80px";
                };
        */
        if (preloadImages) {
            image.src = "images/"+ currentFileName + ".jpg";
        } else {
            // http://www.clker.com/clipart-7105.html
            image.src = "images/website/folder_image.svg.med.png";
        }
        diaryEntry.appendChild(image);
        entryBlock.appendChild(diaryEntry);
        if (IE) {
            asyncLoadParseEntryIE(blockToDo, blockNr, currentFileName, diaryEntry, templateOrProcessor);
        } else {
            asyncLoadParseEntry(blockToDo, blockNr, currentFileName, diaryEntry, templateOrProcessor);
        }
    }

[Milmoor]

Iemand nog een briljant idee?

[_Thanatos_]

De for-loop ziet er raar uit. Het kan komen doordat je een function in een loop aanmaakt - dat kan allerlei problemen geven. Begint es door de functie buiten je for-loop in een variabele te zetten en die aan onerror toe te wijzen.

Verder, met de archaïsche notatie van "element.on[event] = ..." ben ik altijd huivierig voor het gebruik van this. Dat verschilent volgens mij per browser waar dat naar wijst. In dit geval kan het zomaar de ene keer naar het DOM-element wijzen, en de andere keer naar je Image object. Een van de twee zal wel werken, maar als je niet weet welke...

Als je een library gebruikt, bijvoorbeeld jQuery, zou je code er een stuk cleaner uit kunnen zien, en zorgt de library wel dat het crossbrowser is:

JavaScript:

$("<img/>")
  .on("error", function() { this.src = "niet gevonden.jpeg"; })
  .attr("src", function() { return je plaatje-url })
  .appendTo("body");

Ofzo.

Tot slot kan het met caching te maken hebben. Een browser cachet (geheel terecht) ook 404's.

[harrald]

Milmoor schreef op woensdag 27 november 2013 @ 16:32:
Op mijn website vang ik af als een plaatje niet bestaat via onerror. Dit doet in Internet Explorer raar. als ik dit via een attribuut instel werkt het altijd, en via image.onerror werkt het alleen op de eerste paar plaatjes. Ik snap niet waarom daar een beperking in aantal zit. Iemand een goed idee?

code:

        image.setAttribute("onerror","this.src = 'images/website/no-image-available-th.png';this.style.width = '50px';this.style.height = '50px';");
        //TODO: find out why the method below isn't working in IE, at least not after the first few images (timing issue?)
        /*
                image.onerror = function () {
                    this.src = 'images/website/no-image-available-th.png';
                    this.style.width = "80px";
                    this.style.height = "80px";
                };
        */

Zou zomaar kunnen dat dit je wel gaat helpen. Ik weet niet over hoeveel afbeeldingen je het hebt maar nu maakte je voor elke afbeelding een nieuwe functie aan. Dit doet het nut van een functie een beetje teniet.

code:

var errorHandler = function () {
   this.src = 'images/website/no-image-available-th.png';
   this.style.width = "80px";
   this.style.height = "80px";
};

// begin loop
image.onerror = errorHandler

[Milmoor]

Goede tips, ga ik mee testen.