Javascript: Wait until an image has finished loading
The attached ImageLoader helper will start fetching an image and return an image that is resolved once the image is loaded:
ImageLoader.load('/my/image.png').then(function(image) {
...
});
The image argument that is yielded to the promise callback is an
HTMLImageElement
Show archive.org snapshot
. This is the kind of object you get when you call new Image().
Related cards:
Capybara - The missing API
The Capybara API is somewhat hard for parse for a list of methods you can call on a Capybara node. Below you can find such a list. It's all copied from the Capybara docs, so all credit goes to the Ca...
How to create giant memory leaks in AngularJS (and other client-side JavaScript)
This guide shows how to create an AngularJS application that consumes more and more memory until, eventually, the browser process crashes on your users.
Although this guide has been written for Angular 1 originally, most of the advice is relevant...
Capybara: Waiting for pending AJAX requests after a test
When ending a Selenium test Capybara resets the browser state by closing the tab, clearing cookies, localStorage, etc.
It may be a good idea to wait for all in-flight AJAX requests to finish before ending a scenario:
- You may have client-side...
Async control flow in JavaScript: Promises, Microtasks, async/await
Slides for Henning's talk on Sep 21st 2017.
Understanding sync vs. async control flow
Talking to synchronous (or "blocking") API
print('script start')
html = get('/foo')
print(html)
print('s...
The JavaScript Object Model: A deep dive into prototypes and properties
Speaker today is Henning Koch, Head of Development at makandra.
This talk will be in German with English slides.
Introduction
As web developers we work with JavaScript every day, even when our backend code uses anothe...
ImageMagick: How to auto-crop and/or resize an image into a box
Auto-cropping
ImageMagick can automatically crop surrounding transparent pixels from an image:
convert input.png -trim +repage output.png
You need to +repage to update the image's canvas, or applications will be randomly confused.
Trim...
Waiting for page loads and AJAX requests to finish with Capybara
If you're using the Capybara webdriver, steps sometimes fail because the browser hasn't finished loading the next page yet, or it still has a pending AJAX request. You'll often see workarounds like
When I wait for the page to load
Then .....
Generating test images on the fly via JavaScript or Ruby
When you need test images, instead of using services like lorempixel or placehold.it you may generate test images yourself.
Here we build a simple SVG image and wrap it into a data: URI. Al...
Lazy-loading images
Note
This card does not reflect the current state of lazy loading technologies. The native lazy attribute could be used, which is supported by all major browsers since 2022.
Since images are magnitudes la...
Get Moving With Angular 1.2 Animation and Animate.css
Motion is quickly becoming one of the most important emerging techniques in building a quality user experience on the web. Angular 1.2, currently in release candidate form, provides an overhaul of Angular's animation system and makes it spectacu...