Problem when JavaScript is disabled

Arno Welzel
(@awelzel)

10 years, 1 month ago

When disabling JavaScript, every picture gets an extra empty space above it 🙁

The reason seems to be that the plugin puts the original picture to a <noscript> element (so the picture is invisible without JavaScript activated) but also adds an extra “dummy” image above it which is used by the JavaScript to load the pictures when needed.

Maybe it’s better to do all the replacement stuff dynamicall using JavaScript – using <noscript> and assuming that it always works as intended is not a good idea anyway.

https://wordpress.org/plugins/rocket-lazy-load/

Viewing 1 replies (of 1 total)

(@schwarzwaldfalke)

I know it’s an old issue but I had the same problem and wrote a small fix for it. Maybe it’s useful for someone.
Go to the rocket lazy load plugins editor and open rocket-lazy-load.php
Search

function rocket_lazyload_images( $html )

Some lines below you find something like

$html = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#', '<img${1}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-lazy-original="${2}"${3}><noscript><img${1}src="${2}"${3}></noscript>', $html );

Replace the whole line with

$html = preg_replace( '#<img([^>]+?)src=[\'"]?([^\'"\s>]+)[\'"]?([^>]*)>#i', '<img${1}src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" data-lazy-original="${2}"${3}><noscript><style type="text/css">.rll_lazyimg{display:none !important;}</style><img${1}src="${2}"${3}></noscript>', $html );
	$html = preg_replace('#<img([^>]+?)class="([^"]*)"([^>]*)>\s*<noscript>(.*)</noscript>#i','<img${1}class="${2} rll_lazyimg"${3}><noscript>${4}</noscript>',$html);

This will hide the empty boxes if JS is disabled.

Cheers,
Chris

Viewing 1 replies (of 1 total)

The topic ‘Problem when JavaScript is disabled’ is closed to new replies.

Tags