question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

on page load all items load regardless of offset..

See original GitHub issue

I’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:closed
  • Created 3 years ago
  • Comments:6 (2 by maintainers)

github_iconTop GitHub Comments

2reactions
jamesryan-devcommented, Jan 3, 2021

@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

0reactions
loktar00commented, Aug 29, 2022

Should now be fixed in 4.0 with #155

Read more comments on GitHub >

github_iconTop 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 >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found