jQuery
Plugins
UI
Meetups
Forum
Blog
About
Donate

All Forums
Recent Posts
Log In

Search jQuery

jQuery Forum

Move this topic

Forum :

Sub forum :

Using jQuery

Dan111111..

Loading iframe content when scrolling and preventing reloading of content

in Using jQuery • 1 year ago

I'm loading an iframe on the page when a user scrolls down the page and hits 500px but the problem I came across is preventing the content from re-loading. Every time you hit the 500 mark, the content re-loads itself. Can anyone tell me how to load it once?

jQuery(document).scroll(function () {
var y = jQuery(this).scrollTop();
if (y > 500) {
    jQuery('#loadme').attr('src', '/my-content.html');} });

Replies(11)

jakecigar

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

Use on and off…

function oneScroll() {
var y = jQuery(this).scrollTop();
if(y > 500) {
jQuery('#loadme').attr('src', '/my-content.html');
jQuery(document).off("scroll",oneScroll);
}
}
jQuery(document).on("scroll",oneScroll);

JΛ̊KE

Dan111111..

Re: Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

Nice solution! I never thought of using on/off.

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

How would you handle loading multiple iframe's on the same page using this solution? I tried combining if statements but only the first iframe loads as you scroll down.

function oneScroll() {
var y = jQuery(this).scrollTop();
if(y > 500) {
jQuery('#loadme').attr('src', '/my-content.html');
jQuery(document).off("scroll",oneScroll);
if(y > 900) {
jQuery('#loadme2').attr('src', '/my-content2.html');
jQuery(document).off("scroll",oneScroll);
}
}
jQuery(document).on("scroll",oneScroll);

Leave a comment on Dan1111118947942's reply

jakecigar

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

I would use https://css-tricks.com/a-native-lazy-load-for-the-web-platform/ <--

JΛ̊KE

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

Works pretty well but the animations come in too soon. Is there a way to adjust the offset so the loading happens after the page is scrolled beyond the fold?

jakecigar

Re: Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

Where is the "fold"? The middle of the iframe? end of the iframe? Load iframe when what % is visible?

JΛ̊KE

Leave a comment on Dan1111118947942's reply

Dan111111..

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

As soon as the top comes into view is when it starts with the native lazy-load. I'd like to be near the middle of the iframe when it comes in.

Leave a comment on Dan1111118947942's reply

jakecigar

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

You could play games with the CSS, but it gets kludgy. IntersectionObserver is the newest way to accomplish the same thing.

http://home.jejaju.com/play/IntersectionObserver/ has some iframes that get loaded when they are at least 50% in view.

JΛ̊KE

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

This is great!

Leave a comment on Dan1111118947942's reply

Dan111111..

Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

I get a white flash when the iframe loads - most noticeable in Safari. In the past I've been able to get around this with visibility hidden. Is there a method to prevent the white flash using Intersection Observer that you know of?

jakecigar

Re: Re: Loading iframe content when scrolling and preventing reloading of content

1 year ago

It probably has something to do with what you are loading in your iframe. I don’t see white flash in mine.

JΛ̊KE

Leave a comment on Dan1111118947942's reply

Change topic type

Topic Type :

No of days :

Link this topic

Provide the permalink of a topic that is related to this topic

Permalink

Reply to Dan1111118947942's question

Top Reply

{"z59473971":[14737000008299304,14737000008299329,14737000008299331,14737000008299333,14737000008299335,14737000008299337,14737000008299347],"z2950240":[14737000008297423,14737000008297429,14737000008297431,14737000008297433,14737000008297437]}

Statistics

11 Replies
11660 Views
1 Followers

Actions

Permalink

[jQuery] ScrollTop
[jQuery] Dimensions - scrollTop
[jQuery] Animate scrollTop
[jQuery] scrollTop on jQuery object
[jQuery] animate scrollTop
jquery scrollTop

Response title

Attachments

jQuery Forum

Loading iframe content when scrolling and preventing reloading of content

Replies(11)

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Loading iframe content when scrolling and preventing reloading of content

Re: Re: Loading iframe content when scrolling and preventing reloading of content

Statistics

Tags

Actions

Related Posts