Async image load test with gh-pages
I finally got the opportunity to try out GitHub Pages. GitHub Pages is a simple static HTML page that we can create from our GitHub repositories. It is perfect for documentation or anything related to the project. To get started, a gh-pages branch must first be created, and then it can be further setup in the settings section.
For this project, I wrote a test case for async image loading. I built a simple page that would allow me to test this in multiple browsers. The page is very simple with an image, a counter, and a button to reload the image. As the user clicks the button, the image is reloaded. If the image is reloaded, the background changes colours and the counter is updated. The async testing has passed on all the browsers except for Safari.
I decided to dig deeper into this and Safari is like this. I had to dig pretty deep into the webkit source files to see where the load event is fired. After digging around for a little bit, I found the ImageLoader.cpp file. The name sounds promising! Looking at the code, I think I found the problem.
Inside of the updateFromElement function, there is a piece of code that checks whether the old image is equal to the new image, and if they're equal, cancel the load event. After reading some of the comments, it seems like to save browser speed, Safari will not load the new image if they old and new image are the same. It's interesting to see the different ways that browsers go about solving their problems. While Chrome, Firefox, and Opera allow for async image loading even if the image is the same Safari disables this to save some speed.
In the next blog, I'll be looking for new bugs to work on to continue my journey into Open Source. Stay tuned to see how it continues!
For this project, I wrote a test case for async image loading. I built a simple page that would allow me to test this in multiple browsers. The page is very simple with an image, a counter, and a button to reload the image. As the user clicks the button, the image is reloaded. If the image is reloaded, the background changes colours and the counter is updated. The async testing has passed on all the browsers except for Safari.
I decided to dig deeper into this and Safari is like this. I had to dig pretty deep into the webkit source files to see where the load event is fired. After digging around for a little bit, I found the ImageLoader.cpp file. The name sounds promising! Looking at the code, I think I found the problem.
Inside of the updateFromElement function, there is a piece of code that checks whether the old image is equal to the new image, and if they're equal, cancel the load event. After reading some of the comments, it seems like to save browser speed, Safari will not load the new image if they old and new image are the same. It's interesting to see the different ways that browsers go about solving their problems. While Chrome, Firefox, and Opera allow for async image loading even if the image is the same Safari disables this to save some speed.
In the next blog, I'll be looking for new bugs to work on to continue my journey into Open Source. Stay tuned to see how it continues!
Comments
Post a Comment