load/domready

by yshrkn

HTML

<h1>Hello!</h1>
<img src="http://via.placeholder.com/900x600" alt="Main Visual" id="mv">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Pariatur, magni, expedita! Quisquam pariatur, quis porro odit aspernatur nobis consequatur, libero commodi, quibusdam quasi cumque voluptate dolorem, esse repellat velit repudiandae.</p>

<p>alt: <output id="alt"></output></p>
<p>width: <output id="width"></output></p>
<p>height: <output id="height"></output></p>

CSS

img {
  width: 100%;
  height: auto;
}

output {
  border: 2px solid black;
  display: inline-block;
  min-width: 100px;
  padding: 10px;
  background-color: white;
}

JavaScript

/**
 * #mvのaltとwidthとheightを可能な限り早いタイミングで取得してください。
 * このJavaScript自体は、<head>内に記述されているものとします。
 * （JSFiddleの右の[JavaScript]設定で、[LOAD TYPE] が [No warap - in <head>] になっています。）
 */

document.addEventListener("DOMContentLoaded", function() {
  var mv = document.getElementById('mv');
  var alt = document.getElementById('alt');

	alt.textContent = mv.alt;
});

window.addEventListener("load", function() {
  var mv = document.getElementById('mv');
  var width = document.getElementById('width');
  var height = document.getElementById('height');

	width.textContent = mv.offsetWidth;
  height.textContent = mv.offsetHeight;
});