/    Sign up×
Community /Pin to ProfileBookmark

How to disable lazy image loading and enforce immediate load?

Copy linkTweet thisAlerts:
Jun 25.2022

Occasionally I visit some webpages which implement lazy loading.

That means embedded images are only loaded when I scroll down the page

How can I disable the lazy loading (from user script) and enforce all image loading immediately after load start of webpage?

Is this possble with Javascript or CSS?

to post a comment
JavaScript

6 Comments(s) ↴

Copy linkTweet thisAlerts:
@tracknutJun 25.2022 — If the page is written well, turning off Javascript should do it, but that's kind of a sledge hammer solution. I can't think of any other though.
Copy linkTweet thisAlerts:
@maxxwvJun 25.2022 — I assume you mean for a page you're authoring, yes? If so, use the loading attribute on your images, like so:

``html<i>
</i>&lt;img src="../images/mine.jpg" ... loading="eager"&gt;<i>
</i>``
Link to documentation: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading
Copy linkTweet thisAlerts:
@SempervivumJun 25.2022 — @pstein#1644894
>How can I disable the lazy loading (from **user script**)

Do you mean something like Tampermonkey? If so it's possible, however what makes it complex is the fact that there are multiple ways to achieve lazy loading. @maxxwv mentioned the attribute `loading` but before this feature was available, lazy loading was implemented in several ways by javascript. You would have to analyze the code and find out which procedure is being used and then work around it.
Copy linkTweet thisAlerts:
@psteinauthorJul 08.2022 — Ok, thank you so far.

When I look at such a webpage then i found

&lt;img .... loading="lazy"&gt;....&lt;/img&gt;

So I replaced it with Tampermonkey as suggested with loading="eager"

But much to my surprise the Webdeveloper pane in Firefox v102 on Windows shows (with a yellow exclamation mark) for the attribute

"Invalid property name"

If loading="lazy" is accepted and working, why is loading="eager" invalid?
Copy linkTweet thisAlerts:
@SempervivumJul 08.2022 — How did you replace that property? Please show us the line of code.
Copy linkTweet thisAlerts:
@rotirok442Jul 08.2022 — Searching for [Pharmaceutical Products Manufacturers & Suppliers in UAE](https://www.yellowpages.ae/subcategory/medical-&-clinics/pharmaceutical-products/5f118ae8ebee8a7379c10652)? Get complete details of pharmaceutical companies dealing in pharmaceutical products in UAE
×

Success!

Help @pstein spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 6.16,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @nearjob,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,

tipper: @meenaratha,
tipped: article
amount: 1000 SATS,
)...