Bilder mit JavaScript darstellen

[aversio (Gast)]

n'Abend!

Eine von mir öfter besuchte Seite stellt Bilder seit einiger Zeit nur 
mehr über JS dar. Ich habe die Scripte der Hauptseite und des 
CDN-Servers über NoScript zugelassen, was dann auch funktioniert hat.

Ich habe alle, also auch die blockierten Scripte durchsucht - "data-img" 
kommt nur in einem davon vor. Es basiert auf jQuery v1.11.1, 
angereichert mit Google-Schnüfflern. Ist also ziemlich umfangreich und 
durch die fehlende Formatierung auch sehr unübersichtlich.

Heute gab es dabei Probleme (keine Bildeanzeige), so dass ich nach einer 
Möglichkeit suche diesen Schrott endgültig loszuwerden. Bis auf die 
fehlenden Bilder funktioniert die Seite auch ohne JS ganz normal.

Gibt es ein einfaches Userscript (Greasemonkey ist vorhanden) um dieses 
HTML5 data-* Attribut in ein normales src= umzuwandeln oder eben 
irgendwie anders anzuzeigen?

html für diesen Abschnitt:

<p align="center">
  <img data-img="http://irgendeincdnserver/foo/bar.jpg"
       width="610" 
       height="203"
   />
  <font size='1' style='color: #909090; 
        display:block; 
        margin-top: -10px; 
        height: 5px; 
        width: 610px; 
        text-align: right;
        '>Bildtext
   </font>
</p>

[Läubi .. (laeubi)]

Bau dir ein Greasemonkey das in etwa so strukturiert ist (ungetestet da 
du die Seite ja nicht angegeben hast!):

// ==UserScript==
// @name           Bilderseite
// @namespace      mein.namespace
// @description    Erweiterungen für Tolle Bilderseite
// @include        http://die-url.de
// ==/UserScript==
(function($, console) {

$(document).ready(function() {

  $("img[data-img]").each(function() {
    $(this).attr("src", $(this).attr("data-img"));
  });

});

})(window.jQuery || unsafeWindow.jQuery, window.console || unsafeWindow.console || {log:function() {}});

Das bedingt aber das JQuery schon in der Seite benutzt wird, sonst mußt 
du es vorher noch dem Dokument hinzufügen.

[aversio (Gast)]

Danke, hat aber leider nicht funktioniert. Irgendwie wurde jedes "$" 
bemeckert: "$ is not a function"

Bei slashdot habe ich einen Eintrag gefunden, dass das nur mit dem 
unsafeWindow object funktionieren würde, von dessen Verwendung aber im 
GM-Wiki abgeraten wird.

Im Endeffekt habe ich's dann mit Hinweisen aus dem Wiki hingekriegt - 
Unterschiede bei Auflistungen und Attributen zur regulären JS-Syntax.
http://commons.oreilly.com/wiki/index.php/Greasemonkey_Hacks/Getting_Started#Avoid_Common_Pitfalls

Vor allem bin ich damit aber auch jQuery los und kann alle Scripte 
blockieren. GM ist von der NoScript-Blockierung nicht betroffen.

// ==UserScript==
// @name        cracked
// @namespace   http://www.mikrocontroller.net/topic/362201
// @description show pics immediately w/o jQuery
// @include     http://www.cracked.com/*
// @version     1
// @grant       none
// ==/UserScript==

//console.log('GM script \"' + GM_info.script.name + '\" started');

//loops through all images and replaces
//empty src attributes with data-img

var allImg = document.getElementsByTagName("img");
for (var i = 0; i < allImg.length; i++) {
  var actImg = allImg[i];
  var imgsrc = actImg.getAttribute('src');
  if (!imgsrc) {
    var imgdata = actImg.getAttribute('data-img');
    if (imgdata) {
      actImg.src = imgdata;
      //console.log('data-img= ' + imgdata + ' src=' + imgsrc);
    }
  }
}