Avoid Lazy Load of specific Image

Hi,

Let’s say you have an image , and in HTML code , it shows like this

<figure class="wp-block-image size-large"><img loading="lazy" width="1024" height="429" src="https://my.domain.com/wp-content/uploads/2020/10/test.png" alt="" class="wp-image-25" srcset="https://my.domain.com/wp-content/uploads/2020/10/test.png 1024w, https://my.domain.com/wp-content/uploads/2020/10/test-300x126.png 300w, https://my.domain.com/wp-content/uploads/2020/10/test-768x322.png 768w, https://my.domain.com/wp-content/uploads/2020/10/test-1536x644.png 1536w, https://my.domain.com/wp-content/uploads/2020/10/test-1200x503.png 1200w, https://my.domain.com/wp-content/uploads/2020/10/test.png 1970w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>

full path URL is like

/wp-content/uploads/2020/10/test.png
/wp-content/uploads/2020/10/test-1200x503.png
/wp-content/uploads/2020/10/test-768x322.png

any common string in above 3 , are good for partial URL , for example

/wp-content/uploads/2020/10/test
/wp-content/uploads/2020
/wp-content/

all of these 3 examples can match all the images URI in above example

sometimes you may want to exclude it by class name , in above example , the parent class name “wp-block-image” and “size-large” , but this example doesn’t have class name ,it should be show as within <img tag ,

e.g. : <img class="test" src="https://my.domain.com/wp-content/uploads/2020/10/test.png" .... />

in this case , the image class is “test”

Best regards,

• This reply was modified 4 years, 1 month ago by qtwrk.

Hey,

Thanks for your detailed explanation.

It works fine for a specific post thumbnail image.

But I want to disable lazy load on the first four images which appear after opening my home page.

can you kindly tell me how to do that?

Is it possible for any “image preloading technique” after opening the browser?

I hope you again give me the proper solution.

Looking forward to your reply.

Hi,

there is no such “image preload” , it completely defeats the purpose for lazyload , if that is the case , you might just disable the lazyload.

Please check this wiki for how to get the class name

you can exclude these 4 images by class name

Best regards,

Hey,

Thanks for your guide.

It works now like charm.

Hey, I just updated my hosting service, consequently, it also changes my server ip address.

1. so do i need to click the “refresh domain key” option?

2. will it cause any error?

Hi,

yes , if you have link domain to QC dashboard , then please go to QC dashboard -> domain -> setting , put your new IP there

then refresh the domain key.

Best regards,