Bilder mit JavaScript darstellen

aversio Gast #4065689
Lesenswert?
• ▲
▼ 
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:
1
<p align="center">

2
  <img data-img="http://irgendeincdnserver/foo/bar.jpg"

3
       width="610" 

4
       height="203"

5
   />

6
  <font size='1' style='color: #909090; 

7
        display:block; 

8
        margin-top: -10px; 

9
        height: 5px; 

10
        width: 610px; 

11
        text-align: right;

12
        '>Bildtext

13
   </font>

14
</p>
Antwort Zitieren Bearbeiten Thread verschieben Thread sperren Anmeldepflicht aktivieren Anpinnen Thread löschen Thread mit anderem zusammenführen Beitrag melden
Läubi .. Persönliche Seite #4066455
Lesenswert?
• ▲
▼ 
Bau dir ein Greasemonkey das in etwa so strukturiert ist (ungetestet da 
du die Seite ja nicht angegeben hast!):

1
// ==UserScript==

2
// @name           Bilderseite

3
// @namespace      mein.namespace

4
// @description    Erweiterungen für Tolle Bilderseite

5
// @include        http://die-url.de

6
// ==/UserScript==

7
(function($, console) {

8


9
$(document).ready(function() {

10


11
  $("img[data-img]").each(function() {

12
    $(this).attr("src", $(this).attr("data-img"));

13
  });

14


15
});

16


17
})(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.
Antwort Zitieren Bearbeiten Löschen Beitrag melden
aversio Gast #4066912
Lesenswert?
• ▲
▼ 
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.

1
// ==UserScript==

2
// @name        cracked

3
// @namespace   http://www.mikrocontroller.net/topic/362201

4
// @description show pics immediately w/o jQuery

5
// @include     http://www.cracked.com/*

6
// @version     1

7
// @grant       none

8
// ==/UserScript==

9


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

11


12
//loops through all images and replaces

13
//empty src attributes with data-img

14


15
var allImg = document.getElementsByTagName("img");

16
for (var i = 0; i < allImg.length; i++) {

17
  var actImg = allImg[i];

18
  var imgsrc = actImg.getAttribute('src');

19
  if (!imgsrc) {

20
    var imgdata = actImg.getAttribute('data-img');

21
    if (imgdata) {

22
      actImg.src = imgdata;

23
      //console.log('data-img= ' + imgdata + ' src=' + imgsrc);

24
    }

25
  }

26
}
Antwort Zitieren Bearbeiten Löschen Beitrag melden
Thread beobachten

Antwort schreiben

Bitte melde dich an, um einen Beitrag zu schreiben.

Bestehender Account

oder

Mit Google-Account einloggen

Noch kein Account?

Die Registrierung ist kostenlos und dauert nur eine Minute.

Jetzt registrieren