this javascript application intended run on local machine, accessing many large image files local disk.
original code this:
<script> // constants, var inits, etc. </script> <-- html stuff including control buttons, each 1 --> <img id="pgb_runstop" onclick="click_runstop()" src="buttons/but_run.png"> <--then chunk of javascript related buttons --> the thing works ok, see http://everist.org/noblog/20150424_js_animated_gallery.htm
now want extend it, image pathnames defined js constants , vars. remain fixed during lifetime of browser page, others change user actions. i'm stuck 1 part of this. how html parser pay attention script blocks within <img .... > statements?
specifically, want document.write() within image src string.
like: <img src="<script>document.write(b_path)</script>something.png"> this initial page display. images later changed scripts, , that's working ok.
but html parser doesn't seem notice scripts inside html elements.
i'm javascript nubie, may have stupid misconception of how works. doing wrong, or fundamentally impossible due reasons?
here's example:
<script> // constants pgl_but_path = "buttons/" // button images etc are. </script> <-- html stuff --> <-- including control buttons, each 1 --> <img id="pgb_runstop" onclick="click_runstop()" src="<script>document.write(pgl_but_path);</script>but_run.png"> <--then chunk of javascript related buttons --> in debugger, img element appears as:
<img id="pgb_runstop" onclick="click_runstop()" src="<script>document.write(pgl_but_path);</script>but_run.png"/> the intent this:
<img id="pgb_runstop" onclick="click_runstop()" src="buttons/but_run.png"/> i give trying have page render correct buttons, , have js correct them afterwards. i'm surprised... isn't possible evaluate js constants during initial html parsing construct dom, in way?
edit add: sorry, wasn't clear enough in question. want way js make html content/dom correct (per js config values defined on) before page first renders. avoid flicker or resizings after first render.
so solution delay first page render till after scripts have run, can make initial dom adjustments before user sees anything. way that? hmmm... solve problem have. i'll try searching that.
the semantic templating tools suggest interesting (had never heard of it. http://www.martin-brennan.com/semantic-templates-with-mustache-js-and-handlebars-js/ ) correct such scripting add-ons execute after page first renders?
you cannot embed tag within tag's attribute. cannot embed <script> inside src of <img>. that's invalid won't-be-parsed html.
what can do, though, write attribute after fact:
<img id="uniqueid"> <script> var img = document.getelementbyid('uniqueid') img.setattribute('src', pgl_but_path) </script> the <img> tag without src attribute in invalid html technically, although work in browser anyway. if want stay totally legit, create <img> javascript too.
<div id="uniqueid"></div> <script> var elem = document.getelementbyid('uniqueid'); var img = document.createelement('img'); img.setattribute('src', pgl_but_path); elem.appendchild(img); </script> 