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:
var img = document.querySelector('#image-1234'); | |
img.onload = function loaded() { | |
... | |
}; | |
img.src = "http://some.url.com/image"; | |
... | |
//Somewhere late in the code I set the URL to the same thing again | |
img.src = "http://some.url.com/image"; | |
//I'd expect the onLoad event to fire a second time, but it doesn't always in this case! |
- 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.
var img = new Image(100, 100); | |
img.src = 'https://i2.wp.com/www.marcobeltempo.com/wp-content/uploads/2016/05/mb_logo_38x38.png?fit=38%2C38&ssl=1'; | |
document.body.appendChild(img); | |
img.onload = function() { | |
document.getElementsByTagName("body")[0].style.backgroundColor = "red"; | |
} | |
img.onerror = function() { | |
alert("Error"); | |
}; | |
img.src = 'https://i2.wp.com/www.marcobeltempo.com/wp-content/uploads/2016/05/mb_logo_38x38.png?fit=38%2C38&ssl=1' | |
document.body.appendChild(img); | |
img.onload = function() {} | |
img.onerror = function() { | |
alert("Error"); | |
}; |
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:
<!DOCTYPE html> | |
<html lang="en"> | |
<head> | |
<meta charset="utf-8"> | |
<title>OSD600-Lab 11 </title> | |
</head> | |
<body> | |
<script> | |
var url = 'https://i2.wp.com/www.marcobeltempo.com/wp-content/uploads/2016/05/mb_logo_38x38.png?fit=38%2C38&ssl=1'; | |
var img = new Image(); | |
function setBackground(colour) { | |
document.body.style.backgroundColor = colour; | |
} | |
function firstLoad() { | |
setBackground("red"); | |
img.onload = secondLoad; | |
img.src = url; | |
} | |
function secondLoad() { | |
setBackground("green"); | |
} | |
img.onload = firstLoad; | |
img.src = url; | |
</script> | |
</body> | |
</html> |
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.
- WebKit: WebKit Trac
- Chromium: Search or Browse
- Mozilla:Mozilla DXR
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.