A small little rundown of what I'm trying to do:
1) Dynamically determine if a browser is capable of playing HTML5 video (Working)
2) If not capable of playing HTML5 video, load Flash version of video, CSS, and page (Working)
3) If capable of playing HTML5 video, load HTML5 version of video, CSS, and page (Stuck)
All the code needed loads into the browser (IE10, IE11, and Chrome 36 have been tested). The problem is with the execution of JavaScript that is added through the dynamic loading. I'm using the Adobe Captivate CS6 publishing system for Flash and HTML5 output, and all my customized code works perfectly if the scripts are loaded normally, but not through this dynamic method. To save a little bit of effort, I'm just going to post the code for the HTML5 version.
function addExternalStyleSheet(href)
{
if(document.createStyleSheet)
{
document.createStyleSheet(href);
}
else
{
var newSheet = document.createElement('link');
newSheet.setAttribute('rel', 'stylesheet');
newSheet.setAttribute('type', 'text/css');
newSheet.setAttribute('href', href);
document.getElementsByTagName('head')[0].appendChild(newSheet);
}
}
function addInternalStyleSheet(selector, attributes)
{
if(document.createStyleSheet)
{
var styleSheet = document.createStyleSheet('');
styleSheet.cssText = selector + '{' + attibutes + '}';
}
else
{
var styleTag = document.createElement('style');
var head = document.getElementsByTagName('head')[0];
head.appendChild(styleTag);
var sheet = styleTag.sheet ? styleTag.sheet : styleTag.styleSheet;
if(sheet.insertRule)
sheet.insertRule(selector + '{' + attributes + '}', 0);
else
sheet.addRule(selector, attributes, 0);
}
}
function addJavaScript(src)
{
var newScript = document.createElement('script');
newScript.setAttribute('type', 'text/javascript');
newScript.setAttribute('src', src);
document.getElementsByTagName('head')[0].appendChild(newScript);
}
function generateEmbed()
{
if(fileType == 'html5')
{
addExternalStyleSheet('assets/playbar/playbarStyle.css');
addExternalStyleSheet('assets/css/CPLibrary.css');
addExternalStyleSheet('assets/css/CPQuiz.css');
addExternalStyleSheet('assets/css/smoothness/jquery-ui-1.8.14.custom.css');
addExternalStyleSheet('assets/css/dd.css');
addInternalStyleSheet('.shadow', 'overflow: hidden;');
addInternalStyleSheet('.cpMainContainer', 'background-color: transparent; height: 100%; width: 100%; padding: 0px; position: absolute;');
addInternalStyleSheet('.blocker', 'position: absolute; left: 0px; top: 0px; display: none;');
addInternalStyleSheet('.loadingBackground', 'background-color: #777777; opacity: 0.5;');
addInternalStyleSheet('.loadingString', 'color: #ffffff;');
addJavaScript('assets/js/jquery-1.6.1.min.js');
addJavaScript('assets/js/uncompressed.jquery.dd.js');
addJavaScript('assets/js/uncompressed-jquery-ui-1.8.14.custom.js');
addJavaScript('assets/js/CPRuntimeDailog.js');
addJavaScript('assets/js/CPLibrary.js');
addJavaScript('assets/js/CPQuizLibrary.js');
addJavaScript('assets/js/CPPlaybar.js');
addJavaScript('assets/js/CPTOC.js');
addJavaScript('assets/js/CPWidgetManager.js');
addJavaScript('assets/playbar/playbarScript.js');
addJavaScript('Project.js');
document.getElementById('player').innerHTML = '\n <div class="cpMainContainer" id="cpDocument" style="left: 0px; top: 0px;">\n <div class="shadow" id="project_container" style="left: 0px; top: 0px; position: absolute;">\n <div id="project" class="cp-movie" style="width: 1280px; height: 720px">\n <div id="project_main" class="cp-timeline cp-main">\n <div id="div_Slide" onclick="handleClick(event)" style="top: 0px; width: 1280px; height: 720px; position: absolute; -webkit-tap-highlight-color: rgba(0,0,0,0);"><\/div>\n <\/div>\n <div id="autoplayDiv" style="display: block; text-align: center; position: absolute; left: 0px; top: 0px;">\n <img id="autoplayImage" src="" style="position: absolute; display: block; vertical-align: middle;" \/>\n <div id="playImage" tabindex="0" role="buton" aria-label="play" class="autoPlayButton" onkeydown="CPPlayButtonHandle(event)" onClick="cp.movie.play()" style="position: absolute; display: block; vertical-align: middle;"><\/div>\n <\/div>\n <\/div>\n <div id="playbar" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="toc" style="left: 0px; float: left; position: absolute;"><\/div>\n <div id="cc" style="left: 0px; float: left; position: absolute; visibility: hidden;">\n <div id="ccText" style="left: 0px; float: left; position: absolute; width: 100%; height: 100%;">\n <p style="margin-left: 8px; margin-right: 8px; margin-top: 2px;"><\/p>\n <\/div>\n <div id="ccClose" style="background-image: url(.\/assets\/Playbar_icons\/ccClose.png); right: 0px; float: right; position: absolute; cursor: pointer; width: 13px; height: 11px;" onclick="showHideCC()"><\/div>\n <\/div>\n <div id="passwordDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <div id="expDiv" style="display: block; text-align: center; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px;"><\/div>\n <\/div>\n <\/div>\n <div id="blockUserInteraction" class="blocker" style="width: 100%; height: 100%;">\n <table style="width: 100%; height: 100%; text-align: center; vertical-align: middle;" id="loading" class="loadingBackground">\n <tr style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <td style="width: 100%; height: 100%; text-align: center; vertical-align: middle;">\n <image id="preloaderImage"><\/image>\n <div id="loadingString" class="loadingString">Loading...<\/div>\n <\/td>\n <\/tr>\n <\/table>\n <\/div>\n';
function DoCPInit()
{
CPPreInit();
cp.QuizLibraryInit();
CPPostInit();
}
document.oncomplete = DoCPInit();
}
}
I included all the functions for inserting files (internal and external CSS and JavaScript), in case the problem is there, though it took me several hours just to get the internal CSS function to work without disabling the JavaScript function. :S
When using the browser debugger in IE, it errors with the execution (as a part of the DoCPInit function) of the CPPreInit function, which is located in CPLibrary.js, the fifth script dynamically loaded. The debugger states that the function is undefined.
Honestly, I'd prefer to use PHP to get this all done, but my hands are tied, so JavaScript has to get the job done, and I know it can, I'm just screwing it up. :(
I have a suspicion that the complete event is not firing when you expect, primarily because you're loading in these scripts dynamically, so independently to the resources after which complete fires.
It seems to me you actually need to listen for the load event for each resource, count them and only when those are complete invoke DoCPInit
function resourceLoaded() {
var ev = new Event('resourceLoaded', {bubbles: true});
this.removeEventListener('load', resourceLoaded); // cleanup
this.dispatchEvent(ev);
}
function loadResource(parent, tag, args) {
var node = document.createElement(tag), arg;
// add listeners on this line if needed
node.addEventListener('load', resourceLoaded);
for (arg in args) node.setAttribute(arg, args[arg]);
parent.appendChild(node);
return node;
}
function addJavaScript(src) {
loadResource(
document.head,
{
'type': 'text/javascript',
'src': src
}
);
}
var waitfor = 1; // one script
document.addEventListener('resourceLoaded', function () {
if (--waitfor > 0) return;
// invoke whatever
DoCPInit();
});
Partially tested it in Chrome, you may need to check compatibility over browsers
Quick answer: use a script from http://microjs.com/#loader to load the scripts and execute something after a load. LABJs is a good choice.
Alright, so I took my cue from Paul S, but his code wasn't working. Adding alerts to the first line in the dynamically loaded scripts showed that the DoCPInit function was called before the scripts were loaded, which is where the error came from. To correct this, I moved the jQuery call to a standard SCRIPT tag and called the rest using $.AJAX() with async set to false. To simplify the matter, I set it using an array, rather than 10 individual calls.
var addJavaScript = [
'assets/js/uncompressed.jquery.dd.js',
'assets/js/uncompressed-jquery-ui-1.8.14.custom.js',
'assets/js/CPRuntimeDailog.js',
'assets/js/CPLibrary.js',
'assets/js/CPQuizLibrary.js',
'assets/js/CPPlaybar.js',
'assets/js/CPTOC.js',
'assets/js/CPWidgetManager.js',
'assets/playbar/playbarScript.js',
'Project.js',
];
jQuery.each(addJavaScript, function (i, val) {
jQuery.ajax({ async: false, dataType: 'script', url: val });
});
Related
i want that before the actual image gets loaded a spinner should be shown so that my website can load faster
window.addEventListener('load', function(){
var allimages= document.getElementsByTagName('img');
for (var i=0; i<allimages.length; i++) {
if (allimages[i].getAttribute('data-src')) {
allimages[i].setAttribute('src', allimages[i].getAttribute('data-src'));
}
}
}, false)
<img src="https://loremflickr.com/400/600" data-src="images/banguet-hall-location-icon.png" class="secEightImg" />
<img src="http://www.jettools.com/images/animated_spinner.gif" data-src="images/banguet-hall-location-icon.png" class="secEightImg" />
<script>
</script>
the problem is the actual image is shown two times and instead of spinner a broken image (which is shown when no image is found) is shown first
please help
If you want a spinner per image, just add the spinner URL as the initial src attribute for all of them:
<img src="spinner.gif" data-src="actual-image.png" />
Then, once the page loads, change all those src for the real URL (data-src) and listen for the load and error events on each image.
For each of them, add a .loaded class or .error class to the images and style them as you want. For example, you could hide the ones that could not be loaded, show a custom "error" image (using background-image) or style them as you wish, like in this example:
function imageLoaded(e) {
updateImage(e.target, 'loaded');
}
function imageError(e) {
updateImage(e.target, 'error');
}
function updateImage(img, classname) {
// Add the right class:
img.classList.add(classname);
// Remove the data-src attribute:
img.removeAttribute('data-src');
// Remove both listeners:
img.removeEventListener('load', imageLoaded);
img.removeEventListener('error', imageError);
}
window.addEventListener('load', () => {
Array.from(document.getElementsByTagName('img')).forEach(img => {
const src = img.getAttribute('data-src');
if (src) {
// Listen for both events:
img.addEventListener('load', imageLoaded);
img.addEventListener('error', imageError);
// Just to simulate a slow network:
setTimeout(() => {
img.setAttribute('src', src);
}, 2000 + Math.random() * 2000);
}
});
})
html,
body {
margin: 0;
height: 100%;
}
.images {
width: 100%;
height: 100%;
background: #000;
display: flex;
align-items: center;
overflow-x: scroll;
}
.margin-fix {
border-right: 1px solid transparent;
height: 16px;
}
img {
width: 16px;
height: 16px;
margin: 0 64px;
}
img.loaded {
width: auto;
height: 100%;
margin: 0;
}
img.error {
background: red;
border-radius: 100%;
/* You could add a custom "error" image here using background-image */
}
<div class="images">
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="https://d39a3h63xew422.cloudfront.net/wp-content/uploads/2014/07/20145029/driven-by-design-the-incomparable-lancia-stratos-1476934711918-1000x573.jpg" />
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="https://car-images.bauersecure.com/pagefiles/76591/1752x1168/ford_racing_puma_01.jpg?mode=max&quality=90&scale=down" />
<img
src="https://i.stack.imgur.com/RvfGz.gif"
data-src="http://doesntexist.com/image.jpg" />
<span class="margin-fix"></span>
</div>
The problem is that the spinner image you use initially might take some time to load.
One solution would be to use a data URI, so instead of:
<img src="https://i.stack.imgur.com/RvfGz.gif" data-src="actual-image.png" />
You would have:
<img src="data:image/gif;base64,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cXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IENhbid0IGNvbm5lY3QgdG8gbG9jYWwgTXlTUUwgc2VydmVyIHRocm91Z2ggc29ja2V0ICcvdmFyL3J1bi9teXNxbGQvbXlzcWxkLnNvY2snICgyKSBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBBIGxpbmsgdG8gdGhlIHNlcnZlciBjb3VsZCBub3QgYmUgZXN0YWJsaXNoZWQgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQ2FuJ3QgY29ubmVjdCB0byBsb2NhbCBNeVNRTCBzZXJ2ZXIgdGhyb3VnaCBzb2NrZXQgJy92YXIvcnVuL215c3FsZC9teXNxbGQuc29jaycgKDIpIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4KPGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgbXlzcWxfcXVlcnkoKSBbPGEgaHJlZj0nZnVuY3Rpb24ubXlzcWwtcXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IEEgbGluayB0byB0aGUgc2VydmVyIGNvdWxkIG5vdCBiZSBlc3RhYmxpc2hlZCBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBDYW4ndCBjb25uZWN0IHRvIGxvY2FsIE15U1FMIHNlcnZlciB0aHJvdWdoIHNvY2tldCAnL3Zhci9ydW4vbXlzcWxkL215c3FsZC5zb2NrJyAoMikgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQSBsaW5rIHRvIHRoZSBzZXJ2ZXIgY291bGQgbm90IGJlIGVzdGFibGlzaGVkIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4K" data-src="actual-image.png" />
As you can see, your HTML document will grow fast using this approach, which is a problem.
A better approach might be to use CSS to add the spinner so that you only include the data URI once. To do that, you need to add an empty src attribute to your images initially anyway:
<img src data-src="actual-image.png" />
Or:
<img src="" data-src="actual-image.png" />
If you don't put it, the image will have an annoying gray border you can't get rid of until you add a src attribute.
function imageLoaded(e) {
updateImage(e.target, 'loaded');
}
function imageError(e) {
updateImage(e.target, 'error');
}
function updateImage(img, classname) {
// Add the right class:
img.classList.add(classname);
// Remove the data-src attribute:
img.removeAttribute('data-src');
// Remove both listeners:
img.removeEventListener('load', imageLoaded);
img.removeEventListener('error', imageError);
}
window.addEventListener('load', () => {
Array.from(document.getElementsByTagName('img')).forEach(img => {
const src = img.getAttribute('data-src');
if (src) {
// Listen for both events:
img.addEventListener('load', imageLoaded);
img.addEventListener('error', imageError);
// Just to simulate a slow network:
setTimeout(() => {
img.setAttribute('src', src);
}, 2000 + Math.random() * 2000);
}
});
})
html,
body {
margin: 0;
height: 100%;
}
.images {
width: 100%;
height: 100%;
background: #000;
display: flex;
align-items: center;
overflow-x: scroll;
}
.margin-fix {
border-right: 1px solid transparent;
height: 16px;
}
img {
width: 16px;
height: 16px;
margin: 0 64px;
background-image: url("data:image/gif;base64,R0lGODlhEAAQAPYAAAAAAP///yoqKmpqap6enr6+vrq6upCQkFxcXCIiIlpaWtra2tbW1s7OzsjIyMDAwJSUlEREROLi4oyMjBISEhAQEDw8PHR0dK6urqCgoEBAQC4uLsTExOjo6HJyclRUVKKiooKCghwcHHh4ePDw8JaWlmJiYpiYmEhISLi4uPT09E5OTmhoaObm5vj4+BYWFgoKCoaGhnp6eggICHx8fFZWVgQEBAICAj4+PjQ0NAYGBigoKFBQUA4ODiwsLBoaGiAgIDAwMDg4OEJCQh4eHiYmJgwMDCQkJISEhEpKSkxMTLKysqysrKSkpJycnLy8vMLCwjo6OoiIiMzMzBQUFNTU1HBwcKamptLS0uDg4F5eXrCwsOzs7HZ2dpqamsrKyjY2NjIyMhgYGEZGRoCAgGxsbGBgYKioqG5ubrS0tLa2ttzc3FhYWO7u7vLy8lJSUvr6+mRkZNjY2Orq6sbGxoqKitDQ0Pb29o6Ojt7e3qqqqpKSkn5+fgAAAAAAAAAAACH+GkNyZWF0ZWQgd2l0aCBhamF4bG9hZC5pbmZvACH5BAAKAAAAIf8LTkVUU0NBUEUyLjADAQAAACwAAAAAEAAQAAAHjYAAgoOEhYUbIykthoUIHCQqLoI2OjeFCgsdJSsvgjcwPTaDAgYSHoY2FBSWAAMLE4wAPT89ggQMEbEzQD+CBQ0UsQA7RYIGDhWxN0E+ggcPFrEUQjuCCAYXsT5DRIIJEBgfhjsrFkaDERkgJhswMwk4CDzdhBohJwcxNB4sPAmMIlCwkOGhRo5gwhIGAgAh+QQACgABACwAAAAAEAAQAAAHjIAAgoOEhYU7A1dYDFtdG4YAPBhVC1ktXCRfJoVKT1NIERRUSl4qXIRHBFCbhTKFCgYjkII3g0hLUbMAOjaCBEw9ukZGgidNxLMUFYIXTkGzOmLLAEkQCLNUQMEAPxdSGoYvAkS9gjkyNEkJOjovRWAb04NBJlYsWh9KQ2FUkFQ5SWqsEJIAhq6DAAIBACH5BAAKAAIALAAAAAAQABAAAAeJgACCg4SFhQkKE2kGXiwChgBDB0sGDw4NDGpshTheZ2hRFRVDUmsMCIMiZE48hmgtUBuCYxBmkAAQbV2CLBM+t0puaoIySDC3VC4tgh40M7eFNRdH0IRgZUO3NjqDFB9mv4U6Pc+DRzUfQVQ3NzAULxU2hUBDKENCQTtAL9yGRgkbcvggEq9atUAAIfkEAAoAAwAsAAAAABAAEAAAB4+AAIKDhIWFPygeEE4hbEeGADkXBycZZ1tqTkqFQSNIbBtGPUJdD088g1QmMjiGZl9MO4I5ViiQAEgMA4JKLAm3EWtXgmxmOrcUElWCb2zHkFQdcoIWPGK3Sm1LgkcoPrdOKiOCRmA4IpBwDUGDL2A5IjCCN/QAcYUURQIJIlQ9MzZu6aAgRgwFGAFvKRwUCAAh+QQACgAEACwAAAAAEAAQAAAHjIAAgoOEhYUUYW9lHiYRP4YACStxZRc0SBMyFoVEPAoWQDMzAgolEBqDRjg8O4ZKIBNAgkBjG5AAZVtsgj44VLdCanWCYUI3txUPS7xBx5AVDgazAjC3Q3ZeghUJv5B1cgOCNmI/1YUeWSkCgzNUFDODKydzCwqFNkYwOoIubnQIt244MzDC1q2DggIBACH5BAAKAAUALAAAAAAQABAAAAeJgACCg4SFhTBAOSgrEUEUhgBUQThjSh8IcQo+hRUbYEdUNjoiGlZWQYM2QD4vhkI0ZWKCPQmtkG9SEYJURDOQAD4HaLuyv0ZeB4IVj8ZNJ4IwRje/QkxkgjYz05BdamyDN9uFJg9OR4YEK1RUYzFTT0qGdnduXC1Zchg8kEEjaQsMzpTZ8avgoEAAIfkEAAoABgAsAAAAABAAEAAAB4iAAIKDhIWFNz0/Oz47IjCGADpURAkCQUI4USKFNhUvFTMANxU7KElAhDA9OoZHH0oVgjczrJBRZkGyNpCCRCw8vIUzHmXBhDM0HoIGLsCQAjEmgjIqXrxaBxGCGw5cF4Y8TnybglprLXhjFBUWVnpeOIUIT3lydg4PantDz2UZDwYOIEhgzFggACH5BAAKAAcALAAAAAAQABAAAAeLgACCg4SFhjc6RhUVRjaGgzYzRhRiREQ9hSaGOhRFOxSDQQ0uj1RBPjOCIypOjwAJFkSCSyQrrhRDOYILXFSuNkpjggwtvo86H7YAZ1korkRaEYJlC3WuESxBggJLWHGGFhcIxgBvUHQyUT1GQWwhFxuFKyBPakxNXgceYY9HCDEZTlxA8cOVwUGBAAA7AAAAAAAAAAAAPGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgbXlzcWxfcXVlcnkoKSBbPGEgaHJlZj0nZnVuY3Rpb24ubXlzcWwtcXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IENhbid0IGNvbm5lY3QgdG8gbG9jYWwgTXlTUUwgc2VydmVyIHRocm91Z2ggc29ja2V0ICcvdmFyL3J1bi9teXNxbGQvbXlzcWxkLnNvY2snICgyKSBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBBIGxpbmsgdG8gdGhlIHNlcnZlciBjb3VsZCBub3QgYmUgZXN0YWJsaXNoZWQgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQ2FuJ3QgY29ubmVjdCB0byBsb2NhbCBNeVNRTCBzZXJ2ZXIgdGhyb3VnaCBzb2NrZXQgJy92YXIvcnVuL215c3FsZC9teXNxbGQuc29jaycgKDIpIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4KPGJyIC8+CjxiPldhcm5pbmc8L2I+OiAgbXlzcWxfcXVlcnkoKSBbPGEgaHJlZj0nZnVuY3Rpb24ubXlzcWwtcXVlcnknPmZ1bmN0aW9uLm15c3FsLXF1ZXJ5PC9hPl06IEEgbGluayB0byB0aGUgc2VydmVyIGNvdWxkIG5vdCBiZSBlc3RhYmxpc2hlZCBpbiA8Yj4vaG9tZS9hamF4bG9hZC93d3cvbGlicmFpcmllcy9jbGFzcy5teXNxbC5waHA8L2I+IG9uIGxpbmUgPGI+Njg8L2I+PGJyIC8+CjxiciAvPgo8Yj5XYXJuaW5nPC9iPjogIG15c3FsX3F1ZXJ5KCkgWzxhIGhyZWY9J2Z1bmN0aW9uLm15c3FsLXF1ZXJ5Jz5mdW5jdGlvbi5teXNxbC1xdWVyeTwvYT5dOiBDYW4ndCBjb25uZWN0IHRvIGxvY2FsIE15U1FMIHNlcnZlciB0aHJvdWdoIHNvY2tldCAnL3Zhci9ydW4vbXlzcWxkL215c3FsZC5zb2NrJyAoMikgaW4gPGI+L2hvbWUvYWpheGxvYWQvd3d3L2xpYnJhaXJpZXMvY2xhc3MubXlzcWwucGhwPC9iPiBvbiBsaW5lIDxiPjY4PC9iPjxiciAvPgo8YnIgLz4KPGI+V2FybmluZzwvYj46ICBteXNxbF9xdWVyeSgpIFs8YSBocmVmPSdmdW5jdGlvbi5teXNxbC1xdWVyeSc+ZnVuY3Rpb24ubXlzcWwtcXVlcnk8L2E+XTogQSBsaW5rIHRvIHRoZSBzZXJ2ZXIgY291bGQgbm90IGJlIGVzdGFibGlzaGVkIGluIDxiPi9ob21lL2FqYXhsb2FkL3d3dy9saWJyYWlyaWVzL2NsYXNzLm15c3FsLnBocDwvYj4gb24gbGluZSA8Yj42ODwvYj48YnIgLz4K");
}
img.loaded {
width: auto;
height: 100%;
margin: 0;
}
img.error {
background: red;
border-radius: 100%;
/* You could add a custom "error" image here using background-image */
}
<div class="images">
<img
src
data-src="https://d39a3h63xew422.cloudfront.net/wp-content/uploads/2014/07/20145029/driven-by-design-the-incomparable-lancia-stratos-1476934711918-1000x573.jpg" />
<img
src
data-src="https://car-images.bauersecure.com/pagefiles/76591/1752x1168/ford_racing_puma_01.jpg?mode=max&quality=90&scale=down" />
<img
src
data-src="http://doesntexist.com/image.jpg" />
<span class="margin-fix"></span>
</div>
Other approaches might be to just hide the images initially with display: none for example, in which case you might want a wrapper around them to show something like an empty box to indicate the users that something will be shown in there, or even a spinner made with other elements if you want/need to get fancy.
What you can do is something like:
$(".sly-main-slider div img").attr('src', "#");
$(".sly-main-slider").addClass("loading");
$(".sly-main-slider div").hide();
$(".sly-main-slider div img").load(function() {
$(".sly-main-slider div").show();
$(".sly-main-slider").removeClass("loading");
}).attr('src', "https://loremflickr.com/400/600");
.loading {
position: absolute;
top: 10%;
left: 10%;
z-index: 2000;
background: url(http://1.bp.blogspot.com/-nfXo9GWbDtM/VOn0vr4yLMI/AAAAAAAABCA/dDNgd7_QCFo/s1600/block-loader.gif) no-repeat center center;
height: 32px;
width: 32px;
}
.loading:after {
position: absolute;
top: 8px;
left: 40px;
content: 'Loading...';
}
body {
position: relative;
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class='sly-main-slider'>
<div>
<img src="https://loremflickr.com/400/600" alt="" />
</div>
</div>
I have a situation that I'm trying to do, and I need your help because I do not have much experience with JavaScript.
First please take a look at this code where I was through ajax, parse from xml file into html. I set the picture as background of #clickMapFlashContainer, and prepend hotspots clickable circles into #clickAreas which results to get 5 clickable circles, which look like this: (screenshot) http://prntscr.com/d3v97y (Currently when we get to the site, site looks like this)
You'll notice that I have 5 different clickable circles with _clickable id and class circle. Each circle with _clickable id have onclick="onclick(id)" and this function should be executed onclick.
Below I have divs with same id but without _clickable and all of 5 have display: none... Display none needs to be changed to display block when click on corresponding id with _clickable circle.
However, there is one thing I must mention, in a situation when the div with class clickMapItem text is display block, background image from #clickMapFlashContainer should be visible as it is, it is only necessary to change the text below the image, but in situation when the div with class clickMapItem multiImageText is display block, background image from #clickMapFlashContainer should be display none because clickMapItem multiImageText contains a gallery and background should not be seen.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="clickMap">
<div id="clickMapFlashContainer" style="background-image: url(../../../../../../linkableblob/internet_en/9492/image/steel_agg_bof_flash_en-image.jpg;); width: 560px; height: 560px; background-repeat: no-repeat;">
<div id="clickAreas">
<div id="clickMap_item_11024_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 11px; left: 219px; width: 76px; height: 76px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_11006_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 388px; left:
250px; width: 66px; height: 66px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_11004_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 155px; left:
189px; width: 135px; height: 135px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_10450_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 208px; left:
436px; width: 105px; height: 105px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>
<div id="clickMap_item_9510_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: 469px; left:
350px; width: 75px; height: 75px; opacity: 0.5; border-radius: 100%; cursor: pointer;">
</div>
<div id="clickMap_item_default" class="clickMapItem text">
<p>Due to long-standing contact with customers RHI has detailed knowledge of the requirements that steelworkers place on refractories. This is why RHI has been involved in the development of package and system solutions for many years und nowadays offers customized high-end solutions for basically all individual customer requirements.</p>
</div>
</div>
<!-- clickMap text -->
<div id="clickMap_item_9510" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap gallery -->
<div id="clickMap_item_10450" class="clickMapItem multiImageText" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap text -->
<div id="clickMap_item_11004" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap gallery -->
<div id="clickMap_item_11006" class="clickMapItem multiImageText" style="display: none;">
back
<p>text</p>
</div>
<!-- clickMap text -->
<div id="clickMap_item_11024" class="clickMapItem text" style="display: none;">
back
<p>text</p>
</div>
</div>
</div>
<script type="text/javascript">
jQuery(function ($) {
$.ajax({
type: "GET",
url: 'steel_agg_bof_flash_en.xml',
dataType: "xml",
success: xmlParser
});
function xmlParser(xml) {
$(xml).find("basics").each(function () {
var img = $(this).find('imgpath').text();
$('#clickMapFlashContainer').css({
'background-image' : 'url(' + img + ')',
'width' : '560px',
'height' : '560px',
'background-repeat' : 'no-repeat',
});
});
$(xml).find("hotspot").each(function () {
var position = $(this).find('position').text();
var arr = position.split(",");
var hotspotid = $(this).find('hsid').text();
$('#clickAreas').prepend('<div id="'+ hotspotid +'_clickable" class="circle" onclick="changeStyle(id);" style="background: #004593; position: absolute; top: ' + arr[1] + 'px' + '; left: ' + arr[0] + 'px' +'; width: ' + Math.floor(arr[2]/3.28148) + 'px; height: '+ Math.floor(arr[2]/3.28148) + 'px; opacity: 0.5; border-radius: 100%; cursor: pointer;"></div>');
});
}
});
</script>
I found a solution and working properly, but this is JavaScript newbie code as you can see, please take a look and suggest what can be changed, because I think it is a messy code. Whether it is a good idea to use Array.prototype.slice.call to convert NodeList to an Array and then check whether the div contains one of these classes?
function changeStyle(hotspotid) {
var hotspot = hotspotid.replace('_clickable', '');
var hotspots = document.querySelectorAll(".clickMapItem.text, .clickMapItem.multiImageText"); // Return a NodeList
var nodesArray = Array.prototype.slice.call(hotspots, 0); //Convert NodeList to an Array
nodesArray.forEach(function(item) {
console.log(item);
});
var i;
for (i = 0; i < hotspots.length; i++) {
hotspots[i].style.display = "none";
}
if (hotspotid == "clickMap_item_10450_clickable" || hotspotid == "clickMap_item_11006_clickable") {
document.getElementById('clickMapFlashContainer').style.display = "none";
}
if (hotspots[0].style.display == "") {
document.getElementById(hotspot).style.display = '';
document.getElementById("clickMap_item_default").style.display = "none";
} else if (hotspots[1].style.display == "") {
document.getElementById("clickMapFlashContainer").style.display = "none";
}
};
function backClose() {
var sections = document.getElementsByClassName("clickMapItem");
var i;
for (i = 0; i < sections.length; i++) {
sections[i].style.display = "none";
}
document.getElementById('clickMapFlashContainer').style.display = "";
document.getElementById("clickMap_item_default").style.display = "";
}
}
I've the following polymer component (only for testing):
<dom-module id="visu-conveyor">
<template>
<div id='conveyor'>
{{objectName}}
<div style="width: 80px; height: 90%;">
<div style="width: 10px; height: 10px; background: blue;" data-bind="visible: B.B.Value"></div>
<span data-bind="text: $data"></span>
</div>
</div>
</template>
<script>
Polymer({
is: "visu-conveyor",
properties: {
objectName: String
},
attached: function () {
var self = this;
var dc = ko.dataFor(self);
ko.applyBindings(dc, self.$.conveyor);
}
});
</script>
</dom-module>
this component maybe hosted in another component like this:
<dom-module id="visu-tag-root-canvas">
<template>
<div style="height: 100%; width: 100%" id="rootObj">
<content></content>
</div>
</template>
<script>
Polymer({
is: "visu-tag-root-canvas",
properties: {
tagRoot : String
},
ready: function () {
var self = this;
var dc = ko.dataFor(self);
if (self.tagRoot != null) {
//self.$.rootObj.setAttribute("data-bind", "with: " + self.tagRoot);
//todo -> get folder recursive
ko.applyBindings(dc[self.tagRoot], self.$.rootObj);
} else {
ko.applyBindings(dc, self.$.rootObj);
}
}
});
</script>
</dom-module>
For Example a Page may look like this:
<visu-tag-root-canvas>
<visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 64px;" object-name="HH66"></visu-conveyor>
<visu-conveyor style="width: 88px; height: 130px; top: 74px; position: absolute; left: 160px;" object-name="aa31"></visu-conveyor>
<visu-tag-root-canvas tag-root="A" style="left: 284px; position: absolute; top: 255px; width: 305px; height: 216px;">
<visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 30px;" object-name="EE77"></visu-conveyor>
<visu-conveyor style="width: 88px; height: 130px; top: 27px; position: absolute; left: 126px;" object-name="II88"></visu-conveyor>
</visu-tag-root-canvas>
</visu-tag-root-canvas>
That means the 2 visu-conveyors inside the 2nd visu-tag-root-canvas should bind to "A.B.B" and the ones outside to "B.B"!
This works with shady dom! But when I enable shadow Dom, all bind to the same Variable! "B.B"
As Addition my DataContext for Binding looks like this:
{
A {
B {
B {
Value
}
}
}
B {
B {
Value
}
}
}
Was my fault. Since ShadowDom bring real encapsulation, ko.dataFor(self) returns the same for all visu-conveyor, because the dom is encapsualted!
If I change "self.$.rootObj" to "self" it works with shadow dom enabled
I am new to this so please bear with me if my question is obviously stupid. I am trying to incorporate the slideshow as shown in this site using caroufredsel http://coolcarousels.frebsite.nl/c/48/
Now I needed to add captions to the images. so after trying to tweak the code unsuccessfully, I created a workaround where I created another carousel for just the captions and synchronized it with the main carousel. It worked that the captions appeared just fine but now I am not able to synchronize it with the click function/feature on the main carousel. if I comment the click function out , it works splendidly, but I need that click function. what am I doing wrong or is there an easier way to do what I want. I went thru the documentation and tried to incorporate a new div with id "item". but then the entire "pager" section disappears etc. I will include the full code here. thanks in advance for the help.
my css looks like this::
html, body {
height: 100%;
padding: 0;
margin: 0px;
}
body {
min-height: 400px;
}
#wrapper {
width: 697px;
height: 400px;
margin: -155px 0 0 -330px;
position: absolute;
top: 270px;
left: 50%;
box-shadow: 0px 1px 20px #c5a101;
border:3px solid #c5a101;
background-color: rgba(246,217,90,0.9);
}
#carousel {
width: 580px;
height: 360px;
overflow: hidden;
position: relative;
z-index: 2;
float:left;
}
#carousel img {
display: block;
float: left;
}
#pager {
width: 112px;
height: 350px;
overflow: hidden;
position: absolute;
top: 0;
right: 0;
}
#pager div {
height: 81px;
width: 100px;
box-shadow: 0px 0px 5px #c5a101;
}
#pager img {
cursor: pointer;
display: block;
height: 81px;
width: 112px;
margin-bottom: 5px;
float: left;
border:3px solid #c5a101;
cursor:default;
}
#texts-wrapper {
width: 700px;
height: 50px;
float: left;
}
#texts > div {
width: 300px;
height: 50px;
position: relative;
float: left;
margin-top: auto;
}
#texts > div > div {
width: 700px;
position: absolute;
left: 2px;
bottom: 5px;
float: right;
padding-top: 25px;
}
#texts a {
color:#083377;
font-family:Trajan Pro;
font-size: 16px;
font-weight: bold;
text-shadow: 0 1px 2px rgba(0,0,0,0.4);
text-decoration: none;
outline: none;
display: block;
background-color: rgba(248,229,145,0.4);
border: 1px solid rgba(246,217,90,0.4);
width: 700px;
height: 85px;
padding-left: 10px;
}
#texts a:hover {
background-color: rgba(255,208,0,0.9);
box-shadow: 0px 2px 15px #c5a101;
color: rgba(227,75,76,0.7);
}
my html code looks like this::
<div id="wrapper">
<div id="inner">
<div id="carousel">
<img src="img/building.jpg" width="580" height="350" />
<img src="img/guytalkingtokids.jpg" width="580" height="350" />
<img src="img/group.jpg" width="580" height="350" />
<img src="img/oath.jpg" width="580" height="350" />
<img src="img/finalists.jpg" width="580" height="350" />
</div>
<div id="pager"></div>
</div>
<div id="texts-wrapper">
<div id="texts">
<div>
<a style="text-decoration:none; " href="blank.html" >
<div><p>The red building across the street.</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>How yall doin? blah blah</p> </div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>Lotsa ppl!.</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div><p>I put another caption!</p></div></a>
</div>
<div>
<a style="text-decoration:none;" href="blank.html" >
<div> <p>Yay! We won?! How?!</p></div></a>
</div>
</div>
</div>
</div>
And my script tag looks like::
$(function() {
var $carousel = $('#carousel'),
$pager = $('#pager');
// gather the thumbnails
var $thumb = $( '<div class="thumb" />' );
$carousel.children().each(function() {
var src = $(this).attr( 'src' );
$thumb.append( '<img src="' + src.split('/large/').join('/small/') + '" />' );
});
// duplicate the thumbnails
for (var a = 0; a < $carousel.children().length - 1; a++) {
$pager.append( $thumb.clone() );
}
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 5500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
}
}
});
// create thumb carousels
var $thumbs = $('.thumb');
$thumbs.each(function( i ) {
$(this).carouFredSel({
auto: false,
scroll: {
fx: 'directscroll'
},
responsive:true,
items: {
start: i+1,
visible: 1,
width: 112,
height: 89.6
}
});
// click the carousel---> comment out this portion to disable the click function on small images
$(this).click(function() {
var src = $(this).children().first().attr('src').split('/small/').join('/large/');
$carousel.trigger('slideTo', [$('img[src="' + src + '"]', $carousel), 'next']);
});
});
// comment out the click function and uncomment this section of #texts to have a synchronised carousel with captions but no click function
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
});
Now I used jquery version 1.8.2 and caroufredsel version 6.2.1. thanks again for the help in advance. sorry if my code looks messy as well.Latest update as of 3/22/2014:: I went thru the documentation of the plugin CarouFredSel and stumbled upon one of the settable parameters/ configurations called "synchronise". If I understood it right, I can synchronise 2 carousels to respond to the same event. So i added the line of code "synchronise:{"#carousel"} into the text carousel to tell it to synchronise it with the main carousel...
$('#texts').carouFredSel({
items: 1,
direction: 'left',
responsive:true,
synchronise:{"#carousel"},/*This is the new line I added*/
auto: {
play: true,
duration: 500,
easing: 'quadratic',
timeoutDuration: 5500
}
});
Unfortunately that did not work as well. Now there is no timing pattern as well. everytime I click the small image it just went ahead in position at a random rate. So I am still stuck with the same problem if not making it worse. Thanks for the help in advance.
After fighting with the problem for more than a week, I was able to figure out a solution to my problem. Now it may not be the best solution but it worked and hence I am posting it so that in future if somebody else has the same or similar problem, it may be of help.Now if anyone came up with a solution that works better, I would still like you to post it here for I may want to learn what you did, why you did it and learn from the experience. I dont claim to be an expert programmer. I am still learning and this site has been a great learning tool for me so far.Anyway coming back to the problem, I added this piece of code...
//sais try: synchronise texts and carousel to work together and on click
var index = $(this).triggerHandler( 'currentPosition' );
if ( index == 0 ) {
index = $(this).children().length;
}
// trigger the titles carousel
$('#texts').trigger('slideTo', [ index, 'next' ]);
right here...
// create large carousel
$carousel.carouFredSel({
items: {
visible: 1,
width: 580,
height: 350
},
//auto:false,/* temporary: to stop automatic scrolling */
scroll: {
fx: 'directscroll',
pauseOnHover:true,
duration: 500,
timeoutDuration: 3500,
onBefore: function( data ) {
var oldSrc = data.items.old.attr('src').split('/large/').join('/small/'),
newSrc = data.items.visible.attr('src').split('/large/').join('/small/'),
$t = $thumbs.find('img:first-child[src="' + newSrc + '"]').parent();
$t.trigger('slideTo', [$('img[src="' + oldSrc + '"]', $t), 'next']);
/* [ the code goes here!]*/
now with that i was able to synchronise the carousels (#carousel, #texts) together to work with the click function/feature as well. Also I had tried to synchronise the carousel using a synchronise function thats in carouFredSel. Well take that out. It did not work.I dont know if this is going to be useful to anyone else but if it did, thats great. But again if somebody came up with a better solution please do let me know as well. Thanks. Keep up the goo work
I'm trying to something after an on.change happens.
I'm submitting this image throw an .on('change', function(){}) and I need to have some code running after the image is completly rendered in the browser.
So far I have this:
$('.photoimg').on('change', function (){
$('.db_result').html('<img src="images/loader.gif" />');
$('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
$('.db_result').delay(500).queue(function(n) {
$(this).html('');
n();
});
});
I've tried this but it executes all the lines at onde before the image even beggins to render:
$('.photoimg').on('change', function (){
$('.db_result').html('<img src="images/loader.gif" />');
$('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
$('.db_result').delay(500).queue(function(n) {
$(this).html('');
n();
});
/////////////////////////////
alert($(this).closest('.child').html());
/////////////////////////////
});
What I'm looking for is something like this:
$('.photoimg').on('change', function (){
$('.db_result').html('<img src="images/loader.gif" />');
$('.imageform').ajaxForm({ target: $(this).closest('.child')}).submit();
$('.db_result').delay(500).queue(function(n) {
$(this).html('');
n();
});
}).[[afterComplete]](function(){
alert($(this).closest('.child').html());
});
HTML [page wqith the input type file]
<div class="child" style="z-index: 70; position: absolute; top: 0px; left: 0px; width: 800px; height: 172px; cursor: default; background-color: rgba(254, 202, 64, 0.701961);" alt="reset">
<div class="fileinput-holder" style="position: relative;"><input type="text" class="fileinput-preview" style="width: 100%; padding-right: 81px;" readonly="readonly" placeholder="No file selected...">
<span class="fileinput-btn btn" type="button" style="display:block; overflow: hidden; position: absolute; top: 0; right: 0; cursor: pointer;">Browse...<input type="file" class="photoimg" name="photoimg" style="position: absolute; top: 0px; right: 0px; margin: 0px; cursor: pointer; font-size: 999px; opacity: 0; z-index: 999;"></span>
</div>
</div>
PHP [file for processing the input]
...
if(move_uploaded_file($tmp, $path.$actual_image_name)) //check the path if it is fine
{
move_uploaded_file($tmp, $path.$actual_image_name); //move the file to the folder
//display the image after successfully upload
echo "<div class=\"imgh\" style=\"width:auto; height:auto;\" alt=\"reset3\"><img src='data:image/".$ext.";base64,".base64_encode(file_get_contents($path.$actual_image_name))."' style=\"width:inherit; height:inherit; min-width:50px; min-height:50px;\" class='img_set'><div class=\"close\"><i class=\"icon-remove-sign\"></i></div></div>";
}
else
{
echo "<input type='file' class='photoimg' name='photoimg'/><br/><strong style='color:red;'>Carregamento Falhou!</strong>";
}
}
...
Keep your change handler for your input form to handle changes on it, but use the load event for your image, and use that to handle code that needs to execute after the image loaded:
$('img.img_set').on('load', function (){
//...
});
This not always reliable as it may not fire if the image has been cached.
See: jQuery callback on image load (even when the image is cached)