image preloader - Reference loaded <img> in javascript -
i use carousel jquery plugin defines container must contain <img> tags. images loaded , shown, carousel works.
i implementing image preview on hover. i've created separate <div> purpose being shown loaded image.
the problem i'm programatically creating new <img> tag within <div> each time mouse hovers on different image. results in massive amount of unnecessary server requests.
how can use preloaded images carousel within image preview div?
i don't need working solution, i'll accept abstract answers.
further comments, here's working sample of clonenode method mentioned. i've not bothered mechanics of containers or of triggering behaviour via mouse hover, click existing image , work. you'll have change image source have. i'm testing full-res version of image: https://commons.wikimedia.org/wiki/file:soundingrocketsamplepayload-02.jpg
<!doctype html> <html> <head> <script> "use strict"; function byid(id,parent){return (parent == undefined ? document : parent).getelementbyid(id);} window.addeventlistener('load', ondocloaded, false); function ondocloaded() { byid('srcimg').addeventlistener('click', mytest, false); } function mytest() { var tgtelem = byid('srcimg'); var clone1 = tgtelem.clonenode(true); var clone2 = tgtelem.clonenode(true); var clone3 = tgtelem.clonenode(true); document.body.appendchild(clone1); document.body.appendchild(clone2); document.body.appendchild(clone3); } </script> <style> </style> </head> <body> <img id='srcimg' style='width: 256px' src='rockets.jpg'/> </body> </html> 
Comments
Post a Comment