Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Certain images not loading when using threshold: 0.1 - Firefox #231

Open
JorgeSivil opened this issue Mar 20, 2020 · 1 comment
Open

Certain images not loading when using threshold: 0.1 - Firefox #231

JorgeSivil opened this issue Mar 20, 2020 · 1 comment

Comments

@JorgeSivil
Copy link

JorgeSivil commented Mar 20, 2020 •
edited

Expected Behavior

Load image

Current Behavior

Certain images are not loading. I don't know yet what could be affecting it.

image

Figure not loading:

<figure class="listItem__figure relative">
                    <a rel="nofollow" role="link" class="$tkl" href="http://target.georiot.com/Proxy.ashx?TSID=5036&amp;GR_URL=http%3A%2F%2Fwww.amazon.com%2Fs%2Fref%3Das_li_ss_tl%3Furl%3Dsearch-alias%253Dtoys-and-games%26field-keywords%3DProfessor+Severus+Snape&amp;amazon-ids-by-cc=US%3DRankerpic75687-20" data-tkl-params="listId=861089&amp;nodeId=2008343&amp;buyImgLink=true" data-tkl-clickbound="true"><img data-sizes="auto" itemprop="image" data-src="https://imgix.ranker-dev.com/node_img/101/2008343/original/severus-snape-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" class="listItem__image lozad" alt="Professor Severus Snape
...
                    is listed (or ranked) 9 on the list The Best Movie Characters of All Time"></a></figure>

Figure loading:

<figure class="listItem__figure relative">
                    <a rel="nofollow" role="link" class="$tkl" href="http://target.georiot.com/Proxy.ashx?TSID=5036&amp;GR_URL=http%3A%2F%2Fwww.amazon.com%2Fs%2Fref%3Das_li_ss_tl%3Furl%3Dsearch-alias%253Dtoys-and-games%26field-keywords%3DRocky+Balboa&amp;amazon-ids-by-cc=US%3DRankerpic75687-20" data-tkl-params="listId=861089&amp;nodeId=3533123&amp;buyImgLink=true" data-tkl-clickbound="true"><img data-sizes="auto" itemprop="image" data-src="https://imgix.ranker-dev.com/node_img/177/3533123/original/rocky-balboa-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" class="listItem__image lozad" alt="Rocky Balboa
 

                    is listed (or ranked) 10 on the list The Best Movie Characters of All Time" src="https://imgix.ranker-dev.com/node_img/177/3533123/original/rocky-balboa-film-characters-photo-1?w=87&amp;h=87&amp;fit=crop&amp;crop=faces&amp;q=60&amp;fm=pjpg" data-loaded="true"></a></figure>

Possible Solution

Use threshold 0.0 (default)

Context

Loading a list, each element with a "profile" picture. So they have the same structure.
Chrome works OK Version 80.0.3987.149 (Official Build) (64-bit)

Config:

const observer = lozad('.lozad', {
  rootMargin: '200px 0px',
  threshold: 0.1
});
observer.observe();

Tested on:

  • Browser Name and version: Firefox Developer Edition, 75.0b5 (64-bit), Chrome works OK Version 80.0.3987.149 (Official Build) (64-bit)
  • Operating System and version (desktop or mobile): Ubuntu 20.04 Desktop
@rsteei
Copy link

rsteei commented Jul 10, 2020

I had a similar issue with firefox/chrome and alt tag. I added to the lazy images following css: display:block;min-width:1px;min-height:1px; and that fixed the issue for me. Maybe that will fix the issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@rsteei @JorgeSivil