How to use jQuery.Lazy() Plugin with an image containing a cache-busting hash about jquery.lazy HOT 8 CLOSED

I think this would be pretty easy by using a custom loader for Lazy. Just do a string operation and transfer the hash to the image url. Of course you need to implement the animation by yourself, but that should be easy too. ;)

It's untested, but something like this:

<img
  class="lazy"
  data-loader="hashedImageLoader"
  src="/images/PhotoPlaceholder.png?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk"
  data-src="/images/Photo.jpg">

$('.lazy').Lazy({
    hashedImageLoader: (element, response) => {
        let hash = element.attr('src').split('?')[1];
        let src = element.data('src');

        element.attr('src', src + '?' + hash);
        response(true);
    }
});

More examples:

• http://jquery.eisbehr.de/lazy/example_use-custom-loaders
• http://jquery.eisbehr.de/lazy/example_create-own-plugin

from jquery.lazy.

Well, that's kind of the idea, but I don't think this will work as you suggest. From what I understand, the hash is like a timestamp for the image file that is generated on the server and passed back to the client, where it is compared with the cached image file (if any). Because of this, the hash is specific to that file name (in this case Photo.jpg), so we can't simply split the hash and attach it to Photo.jpg on the client because that hash is for PhotoPlaceholder.png.

And that's why I suggested having a second 'hidden' img element (with the actual filename-specific hash) that will download and/or check/re-download the image first, before .lazy can do it's magic to display the hidden image in the visible <img>. Does that logic make sense?

So... is there a way to add this to .lazy so that other's could also benefit from it? I believe there are other tools (other than asp.net/core) that use this same hashing functionality. I don't know how complicated this would be to add, but if this was built directly into .lazy (again perhaps using 2 <img> working together), this would be a great selling feature... :)

from jquery.lazy.

If you have a hidden image field, the browser will directly load the image, so there is no lazy loading at all. This will not word. If you could save the src somwhere else it would be possible.

from jquery.lazy.

Well... (per your suggestion) I have found another element to get the hash. It turns out that you can also use the <link> element to generate the hash i.e. <link href="~/css/loader.css" asp-append-version="true" />, but instead of using a CSS file, I simply use the Photo.jpg, which produces a hash specific to that file (and it is the same hash as when used with an <img> tag: I verified it in the Browser source). A bit of a hack, but it seems to work.

Anyway... to test, I then altered your code to this:

<link class="hide-control" id="source-img-1" href="/images/Photo.jpg" asp-append-version="true">
<img class="lazy" id="img-1" data-loader="hashedImageLoader" src="/images/PhotoPlaceholder.png" data-src="/images/Photo.jpg" asp-append-version="true">

And that produces this when I view it in the Browser Source:

<link class="hide-control" id="source-img-1" href="/images/Photo.jpg?v=AAnmbJAusQ-go5lyg9qCes4WGj8oWsp4eGH78CKKUPA">
<img class="lazy" id="img-1" data-loader="hashedImageLoader" src="/images/PhotoPlaceholder.png?v=4jjcjhwsV9YZ1K8lXgg_50rci1ju_mNaz-HABqCvPFk" data-src="/images/Photo.jpg">

And the Jquery:

    $(".lazy").Lazy({
        effect: 'fadeIn',
        effectTime: 1000,
        hashedImageLoader: (element, response) => {
            let sourceHash = $('#source-' + element.attr('id')).attr('href');
            element.attr('src', sourceHash);
            
            let targetSrc = element.attr('src');
            let targetDataSrc = element.data('src');

            response(true);
        }
    });

When I look in the debugger, the sourceHash, targetSrc, and targetDataSrc are:

sourceHash = '/image/Photo.jpg?v=AAnmbJAusQ-go5lyg9qCes4WGj8oWsp4eGH78CKKUPA'
targetSrc = '/image/Photo.jpg?v=AAnmbJAusQ-go5lyg9qCes4WGj8oWsp4eGH78CKKUPA'
targetDataSrc = '/image/Photo.jpg'

So it looks like the code is setting the image src and the photo displays, but it's NOT easing in? Do I need to somehow set the effect another way?

from jquery.lazy.

If you use a custom loader, you have to do it yourself, because ... it's custom. ;)
Untested, but somehow like this is the best way to do it for images.

$('.lazy').Lazy({
    hashedImageLoader: (element, response) => {
        let imageObj = $(new Image());
        imageObj.one('error', () => response(false)).one('load', () => {
            element.hide();
            element.attr('src', imageObj.attr('src'));
            element.fadeIn(1000);
            imageObj.remove();
            response(true);
        });

        let source = $('#source-' + element.attr('id')).attr('href');
        imageObj.attr('src', source);
        imageObj.complete && imageObj.trigger('load');
    }
});

But I also had another idea, but not sure if this works. But it should be. Maybe you want to test this approach, witch uses all Lazy functionalities.

$('.lazy').Lazy({
    effect: 'fadeIn',
    effectTime: 1000,
    beforeLoad: element => {
        let source = $('#source-' + element.attr('id')).attr('href');
        element.attr('data-src', source);
    }
});

from jquery.lazy.

Yes... that worked great! I tested the second (beforeLoad) one, and it is working as expected. Tks Daniel... 😊

But... what I have learned since then, is that there is a way to actually append the data-src with the asp-append-version on the server using asp.net core. Just so others will benefit, in the page (or Partial View if retrieving via AJAX), simply add:

@using Microsoft.Extensions.DependencyInjection;

var versionProvider = Context.RequestServices.GetRequiredService<IFileVersionProvider>();

// Loop as needed for each file
PathFile = "/images/Photo.jpg";
PathFileWithHash = versionProvider.AddFileVersionToPath(Context.Request.Path, PathFile);
<img class="lazy" src="/images/PhotoPlaceholder.png" data-src="@PathFileWithHash" asp-append-version="true">

Pretty straight forward, allowing .lazy to work without any hacks or the <link> element... 😊

I have another, quick question regarding using the .lazy with AJAX. I have a search page where the user can enter search criteria and click the 'Search' button. That triggers an AJAX .load() and when done (within the statusTxt == "success"), I then call:

$(".lazy").Lazy({
    effect: "fadeIn",
    effectTime: 1000,
    threshold: 0
});

What is happening, is that when the data is retrieved, the images do NOT start to fadein until I touch/drag the scroll bar on the side of the browser. How do I configure .lazy so that when the list is retrieved, the first few photos on top (the ones in the viewport) initially fadein?

from jquery.lazy.

Great that it works now. For your question. use the public functions of lazy.

let lazyInstance = $(".lazy").Lazy({
    chainable: false,
    effect: "fadeIn",
    effectTime: 1000,
    threshold: 0
});

lazyInstance.update();

I'll close this here now, as your question is solved.

from jquery.lazy.

Tks... 👍

Although the public function is NOT working as you suggested. See: #253 for more info.

from jquery.lazy.