{"action":"created","issue":{"url":"https://api.github.com/repos/obdurodon/dh_course/issues/153","repository_url":"https://api.github.com/repos/obdurodon/dh_course","labels_url":"https://api.github.com/repos/obdurodon/dh_course/issues/153/labels{/name}","comments_url":"https://api.github.com/repos/obdurodon/dh_course/issues/153/comments","events_url":"https://api.github.com/repos/obdurodon/dh_course/issues/153/events","html_url":"https://github.com/obdurodon/dh_course/issues/153","id":394489201,"node_id":"MDU6SXNzdWUzOTQ0ODkyMDE=","number":153,"title":".ready()","user":{"login":"zme1","id":25443822,"node_id":"MDQ6VXNlcjI1NDQzODIy","avatar_url":"https://avatars0.githubusercontent.com/u/25443822?v=4","gravatar_id":"","url":"https://api.github.com/users/zme1","html_url":"https://github.com/zme1","followers_url":"https://api.github.com/users/zme1/followers","following_url":"https://api.github.com/users/zme1/following{/other_user}","gists_url":"https://api.github.com/users/zme1/gists{/gist_id}","starred_url":"https://api.github.com/users/zme1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zme1/subscriptions","organizations_url":"https://api.github.com/users/zme1/orgs","repos_url":"https://api.github.com/users/zme1/repos","events_url":"https://api.github.com/users/zme1/events{/privacy}","received_events_url":"https://api.github.com/users/zme1/received_events","type":"User","site_admin":false},"labels":[{"id":894979410,"node_id":"MDU6TGFiZWw4OTQ5Nzk0MTA=","url":"https://api.github.com/repos/obdurodon/dh_course/labels/Topic:%20JavaScript","name":"Topic: JavaScript","color":"006b75","default":false}],"state":"closed","locked":false,"assignee":null,"assignees":[],"milestone":null,"comments":0,"created_at":"2018-12-27T21:12:53Z","updated_at":"2018-12-27T21:13:09Z","closed_at":"2018-12-27T21:13:09Z","author_association":"NONE","body":"In jQuery, the basis for any set of function calls is\r\n```\r\n$( document ).ready(function() {\r\n    // magic\r\n});\r\n```\r\nThis forces the interpreter to wait until the DOM is loaded before executing commands. This is the ideal scenario. Like most things, recreating this statement without jQuery can get tricky. Some people recommend using\r\n```\r\nwindow.onload = function () {\r\n    // magic\r\n};\r\n```\r\nThis code does work, but the problem is that is forces the interpreter to wait not only until the DOM is loaded but until all assets on the page are loaded before it can execute any commands. This becomes a problem when a page becomes laden with costly assets like images, music and video. I think I found there an easy way to use a jQuery-esque .ready() call using plain old javascript.\r\n```\r\ndocument.addEventListener('DOMContentLoaded', function () {\r\n    // magic\r\n});\r\n```\r\nI'm not 100% sure about this though. Any feedback would be appreciated."},"comment":{"url":"https://api.github.com/repos/obdurodon/dh_course/issues/comments/450232206","html_url":"https://github.com/obdurodon/dh_course/issues/153#issuecomment-450232206","issue_url":"https://api.github.com/repos/obdurodon/dh_course/issues/153","id":450232206,"node_id":"MDEyOklzc3VlQ29tbWVudDQ1MDIzMjIwNg==","user":{"login":"zme1","id":25443822,"node_id":"MDQ6VXNlcjI1NDQzODIy","avatar_url":"https://avatars0.githubusercontent.com/u/25443822?v=4","gravatar_id":"","url":"https://api.github.com/users/zme1","html_url":"https://github.com/zme1","followers_url":"https://api.github.com/users/zme1/followers","following_url":"https://api.github.com/users/zme1/following{/other_user}","gists_url":"https://api.github.com/users/zme1/gists{/gist_id}","starred_url":"https://api.github.com/users/zme1/starred{/owner}{/repo}","subscriptions_url":"https://api.github.com/users/zme1/subscriptions","organizations_url":"https://api.github.com/users/zme1/orgs","repos_url":"https://api.github.com/users/zme1/repos","events_url":"https://api.github.com/users/zme1/events{/privacy}","received_events_url":"https://api.github.com/users/zme1/received_events","type":"User","site_admin":false},"created_at":"2018-12-27T21:13:09Z","updated_at":"2018-12-27T21:13:09Z","author_association":"NONE","body":"For those who aren't familiar with the jargon, the problem that Lee is addressing is that when you're using JavaScript to interact with your page, the JavaScript code may load before all of the page information has loaded, and if the JavaScript is supposed to interact with the HTML, you want it to wait for the HTML to finish loading before that interaction begins. The traditional way to tell the JavaScript not to initialize itself until all of the HTML has loaded is with the window.onload event, as Lee writes, but that waits for everything, including some large page features (e.g., images, audio, video) that might take a long time to load, but that might not be worth waiting for, since they won't affect the functionality of your JavaScript. Lee's solution is supported in all major browsers and is a smart response to this requirement, although in practice, if you don't have a lot of expensive auxiliary \"assets\" (such as audio, video, images), you might not notice a difference. I've always used a variant of window.onload (\"variant\" for reasons we can discuss in more detail separately), but my pages don't have a lot of those media assets, so your mileage may vary.\r\n\r\nThe document.addEventListener() is a JavaScript way of saying \"listen (= watch) for when the content of the page has been loaded and only then should you do something.\" This isn't as mysterious or difficult as the jargon makes it sound, and you'll become familiar with it when we get to the JavaScript portion of our course. You're welcome to read ahead, if you'd like; see the links on our main course page."}}
{"actor":{"display_login":"zme1"}}