So I'm attempting to load images in javascript dynamically as the user is scrolling around. The entire application is offline and is written in HTML and javascript. The "scrolling" around behavior is done through CSS3 animations.
The problem is that when I set image.src = "foo.png" it blocks the UI until the image has loaded. Is there a way around this?
How long is the UI being blocked? If it is local then I wouldn't have thought it much at all.
Anyhow, the reason the UI may be being blocked is because it needs to download the image to determine its size. If it doesn't know the image size it will not know how it will affect the layout.
The first think I would do is to set with and height attributes as soon as the tag is created.
Related
I am building an application where there would be 3 preview buttons (Desktop, Mobile, Tablet). Users will be able to create their own design (such as card view/accordions) which would inherit bootstrap classes for responsiveness. Once they click on the preview buttons for eg Mobile/Desktop/Tablet, their created components would behave as per the viewport.
The necessary CSS is in place. The scenario can be achieved if we are using an iframe to load the component. When we are using the iframe that time the viewport behaves as a separate element, helping the CSS to render as it's getting the desired width for the breakpoint. But without the iframe it's not able to bring the outer shell, hence the CSS is waiting for the entire browser to resize, and then only it can show the changes.
But I would want to remove the iframe dependency from the project. The project is being built using angular js 11.
For better understanding, it's the same thing that we experience when we do inspect elements and switch on the mobile emulator in chrome.
Any kind of help or another solution way around is highly appreciated.
I have a site that I load images only when these are in slightly below the view point.
This way, the site first loads without the images then determine what images are needed to be loaded based on the viewpoint.
When user scrolls, and the image is just below the viewpoint, then it loads them.
It works fine on desktop. No laggy, no stutter.
However on mobile web, when I scroll, it stutters as the images are loaded.
Once everything is loaded, the site scrolls up and down smoothly. Also images are resized on the fly to minize file size.
The question that I have is that, what is the best way to load lots of images?
I am loading them only after the site is loaded, then only if they are just bit below the view point.
Do you think I should load them all to avoid stuttering especially on mobile?
I googleed smooth image loading but I don't think I am searching correct terms.
Anyway suggestions will be much appreciated.
Thank you.
Here is a simple and lightweight JS lazy loader library. It's straight forward and easy to understand.
BLazy.js
There is a walk through example from their site.
<script src="blazy.js"></script>
<script>
(function() {
// Initialize
var bLazy = new Blazy();
})();
</script>
Then in your HTML you would setup your images like this. Give it a b-lazy class and a data-src attribute that points to the image.
<img class="b-lazy" data-src="image.jpg" />
ebLazy.js – A lazyload image script
blazy.js examples
I'm trying to set something up where my background would scale depending on the user's browser width, but I'm tied to a background set in the external stylesheet under a certain element. I can change the background, I can modify its attributes, but I cannot replace it with a html background.
I've been researching solutions for this and most of them don't seem to work. I even tried linking (in the html) an external JS that detects screen resolution and chooses a bg file accordingly, which is exactly what I need, only the browser doesn't detect it at all, whether I nest the script within the html or just link it. So I'm looking for a way to link it under the bg setting in CSS. From what I read, this is "possible but risky", with no real instructions on how it's done.
I'm willing to try it despite the risk, but I'm also open to alternative suggestions. All I need is to be able to set two different image files (same image, just scaled differently) for small phones vs everything else. I've already looked at srcset but that requires embedding in html, so it's no go for me, although I was excited about it. I don't mind actually editing the images myself.
I'm not sure what you mean by link javascript in bg settings in the css.
But you should be able to set different backgrounds using media queries within CSS. Take a look at https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
It sounds as though you're looking for media queries. You can set specific CSS based on media features.
See W3Schools for a description and examples on media queries.
I am working on a straightforward web app, purely Javascript.
One of the core functionalities is loading and viewing images.
When a lot of big images are loaded, the script execution often slows down or even halts until some of them are done loading, this is especially noticeable with large .gifs (HTML5 video is not as bad for some reason).
The images are loaded by setting the background-image css attribute of divs with jQuerys .css(), there are no sort of blocking events or sleep / wait time until images are loaded.
Weirdly, on OSX, scrolling (with the Macbook trackpad) temporarily relieves the halt / slowdown, even while in fullscreen (OSX browsers leave wiggle room for the trackpad), which makes me think that it's a problem of rendering or resource allocation of some sort. It feels like the browser does not have the need to redraw, and is only forced to do so because of the scrolling.
I'd like to force it to redraw constantly, 60 FPS.
The issue is with the loading of lot of big images and showing them in the application.
You can try for Image lazy loading concept where images are loaded/fetched as soon as you scroll the window.
May be this link would be helpful. This plugin will take care of loading images when user scrolls and its very easy to use.
Someone can try the concept of WebWorker. Its multithreading in javascript.
I would like to add, to not forget image optimization.
I have small sized <img> in which I put very large pictures. This makes image loading slow and is a waste since I dont really need to download the whole big picture, I show it in very small size.
Is there a way to make HTML load lower resolution images instead of full image resolution? so the loading will be quicker.
There is no feature of HTML (that I am aware of) that automatically generates a thumbnail sized image for you for faster loading. Some sites will do that automatically when you upload like on Wordpress or various e-commerce solutions. So unless you are using one of those, you will have to do your own image re-sizing, before you upload, or write your own feature of the site that resizes images on the fly on the server side.
You have to do this work on the server side, since HTML/CSS/JS are all client side only (node.js non-withstanding) and could only do the resizing for you once the image was already downloaded, which defeats the purpose.