on page load all items load regardless of offset..
See original GitHub issueI’ve added a callback function to test and upon load, all components wrapped seem to load…
I have tested various offsets with consideration of hero height but it would seem they load regardless…
example code:
import TitleText from '../components/TitleText'
import HomeTitleCopyScene from '../components/HomeTitleCopyScene/index.js'
import CaseStudyCards from '../components/CaseStudyCards'
import LazyLoad from 'react-lazy-load';
import TechUsed from '../components/TechUsed'
function Home() {
return (
<div className="container">
<Banner
title="Front-end Development and Design"
copy="With half a decade experience I've worked across a broad spectrum of clients, industries and technologies."
imageD="white-ipad"
imageN="black-ipad"
/>
<LazyLoad offsetVertical={1500} onContentVisible={console.log('loaded1')}>
<HomeTitleCopyScene />
</LazyLoad>
<LazyLoad offsetVertical={1750} onContentVisible={console.log('loaded2')}>
<CaseStudyCards />
</LazyLoad>
<LazyLoad offsetVertical={2000} onContentVisible={console.log('loaded3 ')}>
<TechUsed displayAll title="The Whole is Greater than the Sum of its Parts" text="A list of all technologies, tools, software and services utilised and skilled in over the last 5 years." all />
</LazyLoad>
</div>
);
}
export default Home;
had this previously working so not sure if recent pushes have affected this library for anyone else?
Issue Analytics
- State:
- Created 3 years ago
- Comments:6 (2 by maintainers)
Top Results From Across the Web
Offset Div background on page load - javascript - Stack Overflow
The way I have it set up, it only offsets after the mouse is moved. I have tried several times to get .onload...
Read more >A guide to pagination, load more buttons, and infinite scroll
Here, we explain a few methods of setting up pagination, load more buttons, and infinite scroll to create more dynamic web pages.
Read more >Browser-level image lazy loading for the web - web.dev
This post covers the loading attribute and how it can be used to control the loading of images.
Read more >Fixed header not working on first time load(Offset Positions ...
FWIW, I'm seeing a very similar issue where the fixed header doesn't 'stick' at the top of the page until you resize the...
Read more >align-items - CSS: Cascading Style Sheets - MDN Web Docs
The CSS align-items property sets the align-self value on all direct children as a group. In Flexbox, it controls the alignment of items...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
@Alexanderwags hey man sorry im super late - I never found a solution - I intend on trying to find another library time permitting as this one doesn’t seem to work
Should now be fixed in 4.0 with #155