JSを発火させるタイミング

Javascriptを発火させるタイミングとして以下が考えられる。
2はクリック動作、3は画像がロードのタイミングで発火する。
3の例と注意点を記す。

  1. <script>
  2. <a>のhref
  3. <img>のonload属性

HTML

<img src="画像URL" onload="javascript:
(function() {

/* DOM操作に伴う複数発火防止 */
var scripts = document.getElementsByTagName('script');
for (var i=0 ;i<scripts.length ;i++) {
var s = scripts[i];

if (s.src && s.src.match(/jquery-3.2.1/)) {
return true;
}
}

/* jQueryライブラリ追加 */
var firstscript = document.getElementsByTagName('script')[0];
script = document.createElement('script');
script.type = 'text/javascript';
script.src = 'https://code.jquery.com/jquery-3.2.1.min.js';
firstscript.parentNode.appendChild(script);

/* jQueryライブラリ追加後、自プラグイン実行 */
script.addEventListener('load', function() {
$(function() {

/* 自プラグイン */
$.getscript('自プラグインURL');
});
});
})()">

注意点

画像が追加される都度、DOMが再構築されonloadが再度呼ばれる。
この発火によって、新たにJavascriptが追加・実行され続け、無限ループとなる。
この為、既に1度実行した(jQueryライブラリが追加場合済み)の場合、処理をスキップさせる必要がある。