![]() ![]() Zoomin(), which creates a zoom-in action for scaling up the image size by 100 pixels until the maximum defined size (1000 px.) is reached. Those functions work for any tag that you label with the ID zoom_img. The resizing task takes two functions, which you can either insert directly into your HTML source with tags or into a standalone JS file. Resizing images with JS is particularly useful for creating online product galleries, in which users can zoom in or out of images according to the maximum settings you specify with only one click. No spam, unsubscribe at any time.Resizing Images for a Zoom Effect With JS On this site I try to write about interesting and weird projects, and my newsletter is no different! It includes early access to upcoming posts and access to special bonus content. It’s easy to write performant JavaScript when you remove JavaScript and just use CSS! More blog posts Want to read more? If you don’t need to read element sizes in JavaScript, container queries are great. Thrashing inside a resize event listener can trigger this hundreds of times per second, which can cause the browser to slow down and even freeze. This is called layout thrashing, and it’s a common performance bottleneck. The browser has to account for the fact that styles have changed in some way since you last read the size of the element, so it has to recalculate the size of the element all over again next time you read it. If you then make changes to something on the screen, this invalidates the layout again and the browser can’t cache the size. Reading the size of an element forces the browser to immediately and synchronously calculate its size, which forces the entire page to undergo layout and style calculations. What makes it worse is that you’re probably going to pair the resize event with some logic to read the size of an element on the screen, such as with element.clientWidth, element.getBoundingClientRect(), or getComputedStyle(). ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |