Images using data-src tag?

Browsing to this page, with SeaMonkey/2.49.4, the images seem to be 
missing? I think they're using a "data-src" tag.

https://developer.ibm.com/tutorials/l-virtual-filesystem-switch/

-- 
Gerry Hickman (London UK)
0
Gerry
1/13/2020 9:13:54 PM
mozilla.support.seamonkey 13542 articles. 0 followers. Post Follow

6 Replies
76 Views

Similar Articles

[PageSpeed] 9

On 2020-01-13, Gerry Hickman wrote:

> Browsing to this page, with SeaMonkey/2.49.4, the images seem to be
> missing? I think they're using a "data-src" tag.
>
> https://developer.ibm.com/tutorials/l-virtual-filesystem-switch/

Those are "lazy-loaded" images, handled by javascript code.

From a quick glance at the page source, the image loading code uses
IntersectionObserver, which was introduced in Firefox 55 [1].

As Seamonkey 2.49 is "based on" Firefox 52, the lack of
IntersectionObserver is likely the problem. But it will probably work
with Seamonkey 2.53 ("based on" Firefox 56).

[1] https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Browser_compatibility

-- 
Nuno Silva
0
Nuno
1/13/2020 10:46:59 PM
On 13/01/20 22:46, Nuno Silva wrote:
> On 2020-01-13, Gerry Hickman wrote:
> 
>> Browsing to this page, with SeaMonkey/2.49.4, the images seem to be
>> missing? I think they're using a "data-src" tag.
>>
>> https://developer.ibm.com/tutorials/l-virtual-filesystem-switch/
> 
> Those are "lazy-loaded" images, handled by javascript code.
> ...

You can provide UserJS or, more easily, if (as you should) you have 
NoScript installed, a NoScript page surrogate (!@ site prefix) for the 
site on these lines:

for (let ii of document.querySelectorAll("img[data-src]")) {
	ii.setAttribute("src", ii.getAttribute("data-src"));
}

See <https://hackademix.net/2011/09/29/script-surrogates-quick-reference/>.

/df

-- 
London
UK
0
Dirk
1/14/2020 11:33:09 AM
> You can provide UserJS or, more easily, if (as you should) you have 
> NoScript installed

Thanks, I had a quick look at NoScript, but it says it's only for 
Firefox, not SeaMonkey?

-- 
Gerry Hickman (London UK)
0
Gerry
1/15/2020 6:39:40 PM
On 15/01/20 18:39, Gerry Hickman wrote:
>> You can provide UserJS or, more easily, if (as you should) you have 
>> NoScript installed
> 
> Thanks, I had a quick look at NoScript, but it says it's only for 
> Firefox, not SeaMonkey?

You need the 'Classic' version 5.1.9, not the 'Quantum' version that 
only works with newer vandalised FF versions. This is explained at 
<https://noscript.net/getit>, though not on the home page, so you just 
had to be a bit more persistent.

When I opened a browser without NoScript I couldn't believe the rubbish 
I was being shown.

HTH
/df

-- 
London
UK
0
Dirk
1/15/2020 11:34:39 PM
Dirk Fieldhouse wrote:
> You need the 'Classic' version 5.1.9, not the 'Quantum' version that 
> only works with newer vandalised FF versions.

Thanks,

I installed NoScript classic XPI
then added these two config entries

noscript.surrogate.ibm.replacement
	for (let ii of document.querySelectorAll("img[data-src]")){ 
ii.setAttribute("src", ii.getAttribute("data-src")); }
noscript.surrogate.ibm.sources
	!@https://developer.ibm.com/tutorials/l-virtual-filesystem-switch/*

and the page worked correctly straight away!


-- 
Gerry Hickman (London UK)
0
Gerry
1/16/2020 7:29:04 PM
On 16/01/20 19:29, Gerry Hickman wrote:
> Dirk Fieldhouse wrote:
>> You need the 'Classic' version 5.1.9, not the 'Quantum' version that 
>> only works with newer vandalised FF versions.
> 
> Thanks,
> 
> I installed NoScript classic XPI
> then added these two config entries
> 
> noscript.surrogate.ibm.replacement
>      for (let ii of document.querySelectorAll("img[data-src]")){ 
> ii.setAttribute("src", ii.getAttribute("data-src")); }
> noscript.surrogate.ibm.sources
>      !@https://developer.ibm.com/tutorials/l-virtual-filesystem-switch/*
> 
> and the page worked correctly straight away!

You are now a NoScript guru!

As you can see, you can either run it with all JS blocked and 
selectively enable certain domains (preferred but sometimes hard work), 
or trust all JS, or all JS from the visited domain, but rely on its 
other features (including blacklisting domains) to sanitise sites that 
you visit.

In case anyone would like the scriptlet translated into English, it says 
this: for each <img> element in the page that has a 'data-src' 
attribute, set the value of its 'src' attribute to the value of its 
'data-src' attribute.

By the magic of modifying the page through the Document Object Model 
interface in this way, the browser updates the modified elements and the 
hidden images appear. This is just what the site JS should do, but in 
some code that runs asynchronously from the page load so that the page 
appears more quickly (and the visitor won't care, because the images 
that the designers expect not to be in the visible in the browser's 
scroll window will have loaded by the time the page has been scrolled 
down). But if the mechanism used to make the load asynchronous fails 
(maybe using some unsupported JS feature), or if you've disabled JS, the 
images fail to appear.

/df

-- 
London
UK
0
Dirk
1/16/2020 10:53:14 PM
Reply: