<img> - loading='lazy' vs Intersection Observer? [closed] - javascript

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 8 months ago.
Improve this question
I'm building a React app which is very image heavy, all from API calls. I've got loading='lazy' on all of them but it got me wondering if more can be done? I know you can achieve a similar result using intersection observers and only rendering them when in view.
My question is better/are there any further benefits to implementing intersection observers, or will it be a waste of time since loading='lazy' does enough?
Thanks!

They do the same, if you want to load the image whenever it enters the viewport, Intersection Observer Give more control, For example, may you want to load the image when the image is at bottom of the viewport by let's say 100px, or you may want to do another action with the image beside be loaded.

Related

How to make page load animation like in Youtube [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 months ago.
Improve this question
How can I make the page load elements before the content is fully loaded? Is there a name for this animation style? Youtube, Binance and many other sites use this kind of content loading, but all the tutorials I could find are related to the usual loading spinners
If you're using Reactjs then you can use the skeleton-loading package from here
If you want to make it with only HTML, CSS and javascript, then you can learn to make it with this video tutorial

Javascript: how to make a website that allow user to scroll in any direction? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 6 years ago.
Improve this question
This site is pretty cool, http://pharrellwilliams.com/, and I'm wondering what function makes the users can scroll in any direction and the size of page is endless.
This is the library that the website uses:
http://www.pixijs.com/
https://github.com/pixijs/pixi.js
It shows you when you open up the inspector and take a look at the console.
No problem, make a div that's HUGE, like 10,000px (hardcoded!) in width or something that's way bigger than any possible screen size, and however high you need it to be. Then, fill with content. Boom! Your done.

How to build a graph page like this one? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I came accoss this webpage: http://www.concerthotels.com/100-years-of-rock and it is very cool. I would like to build some content with similar looking.
Is it possible that someone could give me a direction how this page is built? Thanks a lot for that.
this is made with javascript , css , html5
there are many jquery plugin like scroll magic who can give you the same effect as scrolling content automatically or made you own timeline : (http://janpaepke.github.io/ScrollMagic/)
also drawing and animating lines can made with SVG (Scalable Vector Graphics ), visit for more information (http://www.w3schools.com/svg/) .
hope this can give you a small view of how you can do the same effect :)

How do I create clickable areas on an image within a webpage with javascript? [closed]

Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I want to create a webpage displaying an image that has areas on it that can be clicked to do various things like playing sound, displaying text, linking to other pages. The only problem is I have no idea what I need to use within javascript to do so. The area need not be complicated, just a simple geometric shape.
What sort of tools should I be looking at in Javascript to do achieve this?
Thanks in advance
You might want to take a look at <map></map> tag in HTML: http://www.w3schools.com/tags/tag_map.asp
It should accomplish what you want to do.

Best way to make image interactive [closed]

Closed. This question is opinion-based. It is not currently accepting answers.
Want to improve this question? Update the question so it can be answered with facts and citations by editing this post.
Closed 9 years ago.
Improve this question
I want to make "game" played from browser (fullscreen or not), where will be shown only photo with posibility to interact with object on it. Like pickup something, open etc.
What is best way to do it?
Use only html(5), javascript etc or something like Flash?
Thank you very much for answer
Use html5 canvas technology, there is a library called Kineticjs, which allows you to put event listeners to independent objects on canvas screen, such as putting drag&drop support for a circle drawed into canvas.
You can go for a solution that uses canvas but maybe just simple svg is enough. Both solutions involve JavaScript. HTML5 means nothing.
I would not recommend Flash because of compatibility issues.

Categories

Resources