Debugging Image Load Test Case

Our latest lesson was focused on the importance of effective source code reading. Projects can contain millions of lines of code. Imagine trying to find the right spot to fix a bug or add a new feature? In ordered to improve our code reading skills this week’s lab was made up of three separate tasks. Reading code on a large, open source project.
You will also create a simple HTML/JS test case, and learn about GitHub’s special gh-pages branch and static web publishing.

We were given the following scenario:

With some browsers, I notice elements on my page don’t seem to always fire their onLoad event. Specifically, when I set the .src of an image to the same URL as it’s already using, no load event fires. My code looks something like this: With some browsers, I notice that <img> elements in my page don’t seem to always fire their onLoad event. specifically, when I set the .src of an image to the same URL as it’s already using, no load event fires.
My code looks something like this:

The goal was to create a test case that:

  • loads an `img` with a given src (use any image URL you want)
  • make sure the onLoad event fires
  • after the first onLoad is completed, update the img.src to the same URL you used in step 1.
  • make sure a second onLoad event fires. If the second event fires, your test passes. If not, it fails.

In my first implementation I was using jQuery XHR requests which pointed out by David Humphreys was triggering different paths.

David suggested removing any jQuery requests and working strictly with the browser.

lab11 capture

I had applied the recommended changes but was still experiencing issue. Only the second onLoad was being called.
After another review David made the following suggestions:
It’s finally working! Check it out below.
Test it Out

GitHub Pages

Many aren’t aware of a very useful GitHub feature called “GitHub Pages”. This feature is designed to host your personal pages directly from a GitHub repository.
Configuring a publishing source for GitHub Pages is very simple and great for users looking to host a lightweight web app or even their own web page.
*Fun Fact: the old design for this page was once hosted using gh_pages. Check it out

Browser Testing

It was interesting to dig through each browser repository tools, trying to uncover how each one triggered this event.

Results
Firefox Quantum v.58
Google Chrome v.63
Microsoft Edge
Safari

The test seemed to pass across all browsers except for Apple’s Safari. Unfortunately, I couldn’t fully dive into testing Safari, but luckily other classmates were able to confirm the issue.

I was still curious to see if I could locate the main source file and code block responsible for this trigger.

While searching for any reference to HTML images I came across ImageLoader.cpp. After sharing the link in our class slack channel, a fellow classmate, Sean Prashad was able to uncover the issue.

You can read Sean’s experience here.

Shifting my focus to Firefox Quantum I was curious to see how the image trigger was implemented. Was it similar to Safari’s methods? The Mozilla DXR to is a very code search and navigation tool aimed at making sense of large projects like Firefox. I implemented the same strategy I used in WebKit and found the same file name ImageLoader.cpp.

Add a comment...

Categories

%d bloggers like this: