dkern / jquery.lazy

A lightweight, fast, feature-rich, powerful and highly configurable delayed content, image and background lazy loading plugin for jQuery & Zepto.
http://jquery.eisbehr.de/lazy
Other
1.02k stars 237 forks source link

Check exist img tag in picture for placeholder img #178

Closed SkyHolder closed 5 years ago

SkyHolder commented 5 years ago

Hi, i use plugin picture like this

<picture class="lazy" data-src="{{image.path|resize(600, 900, {mode:'crop'})}}, {{image.path|resize(1200, 1800, {mode:'crop'})}} 2x" >
    <data-src srcset="{{image.path|resize(480, 720, {mode:'crop'})}}, {{image.path|resize(960, 1440, {mode:'crop'})}} 2x" media="(max-width: 460px)" type="image/jpeg"></data-src>
    <data-src srcset="{{image.path|resize(600, 900, {mode:'crop'})}}, {{image.path|resize(1200, 1800, {mode:'crop'})}} 2x"></data-src>
    <img srcset="{{image.path|resize(6, 9, {mode:'crop'})|base64}}">
</picture>

i using small blurred image for placeholder and for simple img tag it work great, but in case with tag it make two tag in tag.

i do little update for your script and it work nice.

function createImageObject(parent, src, response) {
        // create image tag
        // var imageObj = $('<img>')

        // check if img exist
        var imageObj;
        if (parent.find('img').length > 0) {
            imageObj = parent.find('img');
        } else {
            imageObj = $('<img>')
        }
        imageObj
SkyHolder commented 5 years ago

Sorry, i figure out my mistakes. partially Now, if i use code like this

<picture class="lazy">
    <data-src srcset="{{look.image.path|resize(228, 342, {mode:'crop'})}}, {{look.image.path|resize(456, 684, {mode:'crop'})}} 2x" media="(max-width: 460px)" type="image/jpeg"></data-src>
    <data-src srcset="{{look.image.path|resize(600, 900, {mode:'crop'})}}, {{look.image.path|resize(1200, 1800, {mode:'crop'})}} 2x"></data-src>
    <data-img src="{{look.image.path|resize(228, 342, {mode:'crop'})}}" >
    <source srcset="{{look.image.path|resize(228, 342, {mode:'crop'})}}">
    <img src="{{look.image.path|resize(6, 9, {mode:'crop'})|base64}}">
</picture>

it show blurred images, but after loading , the elements and are replaced and the picture disappears for a moment

dkern commented 5 years ago

Why do you use data-img and img inside the picture? Remove the img, Lazy wil handle it for you.

SkyHolder commented 5 years ago

I add a small blurry image so that it appears immediately when the page loads, when the script does its work, the main image is shown. with tag img it works fine