Issue in applying lazyload for images in @Editable

Question

A Glassmapper is used in our running project and planning to apply lazy loading for all images. For this, I have to implement the renderField Pipeline to apply lazyload functionality to all images.

It is working fine with the default Sitecore field

@Html.Sitecore().Field(LandingPage.FieldIds.BackgroundImage.ToString(), Model.LandingPage.Item, new { MaxWidth = 1500 })

We are trying to apply lazyloading with Glassmapper. so we have written the below code.

@Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500 })

The above code is working fine in the Experience editor but not working on actual normal page.

How we can apply lazyloading with Glassmapper @Html.Glass().Editable() for image field? Or is there any way to render renderfield pipeline for the image field forcefully?

current output with glass().Editable():

<img src="/-/media/images/instron/landing-page-images/mastheads/products/webmasthead_testingsystems_2020.jpg?h=382&amp;w=1500&amp;la=en-IN&amp;hash=89A18D0E8314CC8697DCA3BC8C93BDB7" maxwidth="1500" alt="demo">

Expected output with glass().Editable():

<img src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" alt="demo" width="1500" height="382" maxwidth="1500" data-src="/-/media/images/instron/landing-page-images/mastheads/products/webmasthead_testingsystems_2020.jpg?h=382&amp;iar=0&amp;w=1500&amp;hash=0A90A8CF5873BDA7CBFA8507EDF073C6" class="lazy">

Thanks

Answer 1

The first thing is you can now use the loading attribute to lazy-load images without the need to write custom lazy-loading code or use a separate JavaScript library. eg, <img loading=lazy>

https://web.dev/browser-level-image-lazy-loading/

Now to render an image using Glass Mapper you should use RenderImage

@Html.Glass().RenderImage(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, loading = "Lazy" }, isEditable: true)

Or if want to use Editable

 @Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, loading= "lazy" })

Still, if you want to use class parameter on image tag for lazy loading:

@Html.Glass().Editable(Model.LandingPage, x => x.Background_Image, new { MaxWidth = 1500, class = "lazy" })

Answer 2

Try using this:

@Html.Glass().RenderImage(Model, x => x.LandingPage, new { Width = 100 }, isEditable: true)