How to apply referrerpolicy attribute with Lazyload with jQuery

writingdeveloper 0
Viewed 21

I set Lazyload script with jQuery with this code in my footer

<script>
    $(document).ready(function(){
    $("img.lazy").lazyload({
    threshold : 10,
    effect : "fadeIn",
    });
    });
</script>

And this is my HTML part of lazyload

<a href="https://www.example.com" target="_blank" width="100%" height="100%">
<img class="lazy" src="//example.jpg" data-original="//example.jpg" referrerpolicy="no-referrer">
</a>

If I test without lazyload, refererpolicy works fine, but If I set with lazyload it seems that referrerpolicy attribute is not working. Is there any ways to set lazyload and refererpolicy together?

lazy-loading jquery
1 Answers

lazyload 1.9.1 loads images in the background then updates your image with the background-loaded image. This allows it to provide a "loading..." type placeholder for when images take some time to load, rather than use the default browser image-not-found or image-loading image.

Lazyload does this with:

$("<img/>")[0].src = ...

ie, an in-memory image tag that doesn't exist in the DOM. When the load event of that in-memory image fires, lazyload then sets your img tag's src to the same as that of the in-memory image, thus using the cached version of the image.

As the $("<img/>") does not have a referrerpolicy, you get the default for that in-memory image tag: strict-origin-when-cross-origin.

The solution is to amend lazyload.js, line 105 to:

$("<img />", { referrerpolicy: $(this).attr("referrerpolicy") })

(there may need to be other checks as lazyload also works on non-images with background-image)

Obviously you then won't be able to use a CDN. Sample fiddle: https://jsfiddle.net/d954qtrm/2/

Note that lazyload v2.0 does not use an in-memory img tag so does not have the same problem and uses the source img referrerpolicy: https://jsfiddle.net/d954qtrm/3/

freedomn-m0
Related