We Keep Coding

Image not loading in html page

I am trying to flip images whenever user clicks the next button on the web page
Refer https://jsfiddle.net/jonathan668/vwc1hd8z/6/
Issue is My image urls generated via javascript are not loading to html
I tried various options but unable to resolve
I am new to Javascript and CSS also

You don't need to create a new Image object to change the source. Remove line 8 of your JavaScript image5 = new Image(); and it should work perfectly.

Postpone loading an image that is not visible on initial view

I am trying to figure out how to optimize a duplication of an image. Basically I have the same image in four different sections. However, the sections are controlled with toggle tabs, so only one shows at a time.
Is there a way for the browser to not load the image until the tab is clicked or for the browser to load the image once, rather than four times and then to just echo it?
I thought of doing something just like the following and then echoing it, but won't the image still load four times?:
$target = '<img src="../images/target.jpg" ';
I am fine with the image loading multiple times, but not on page load, to allow for reducing the initial page load for the user.
If this is confusion at all, please ask for more information.

A Useful Tutorial And Explanation
The same image will only get loaded once, the browsers doesn't load an image anew every single time the source gets mentioned, even when the alt is different
PHP
With PHP you can only influence what HTML is send to the browser. But, you want the browser to load your image after the rest of the page. With PHP, you cannot tell te browser to do so, it treats all HTML in the same way.
JS
To do the trick, the image can be loaded in after the page has been loaded. Since the image is not visible yet on the homepage, this does not matter.
To make the browser load in the image afterwards you can give an <img> a fake src and an attribute containing the real source, like so:
<img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="THE_LINK_TO_YOUR_IMAGE">
data-src now contains the real link to your image.
With the following JS you can then change out the data-src attribute to become the src attribute, after the page has loaded. The image will then load immediately after the page has finished loading:
JS
<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>
The JS should come just before the last body tag, to further decrease loading time.

How to play video in new (blank) window?

Hi guys,
I'running on wordpress
I made this:
http://imgur.com/Moc84HD.jpg
When I click on ''Click here to play the video clip'' it open a new (blank) window)
in HTML editor I wrote code:
Click here to play the video clip
But, I don't know how to implent this code into this blank space:
<script src='http://hqq.tv/player/hash.php?hash=244206211243244205241239213235211241'></script><script src='http://hqq.tv/player/script.php?width=720&height=450'>
I want this blank window will be looks like this:
http://imgur.com/MAcmjKe.jpg
Have you any solutions?
Thanks for help..
Have a nice day ! :)

In the window.open('', part you missed the first important part: the URL you should render. What you can do is, within your same web project, you can either:
a) Create a new, dynamic URL where you can pass the Video ID or something that let's you reference a single video and open that dynamic URL.
or, if you don't have a backend language, then you can...
b) Modify the content of the about:blank page you just opened by creating the popup, adding the HTML code inside and opening it. You'll still have an about:blank URL but you'll be actually seeing whatever content you put there. To do so, you should...
// Source: http://www.electrictoolbox.com/write-content-dynamic-javascript-popup/
var w = window.open('', '', 'width=400,height=400');
w.document.write('HTML content goes here, such as your script from hqq.tv');
w.document.close();
And modify the script accordingly.
PS: Be aware that, in order to write a script tag with Javascript, you'll have to split the tag in order to render it. Check this answer to see the problem and solution.

Forcing redraw/repaint of a DOM element in firefox after page load

I've looked through similar threads and tried everything that was suggested there to no avail.
I'm trying to replace an image after the page was loaded by changing it's src attribute once I have a new location. I want to replace the image with a local image.
Directly changing the src attribute via img.src = urlString; or using the setAttribute() method sets the src but doesn't redraw the image in the loaded page. I used window.alert(img.src); to check that the src attribute is really changed.
I've used the following code snippet from here to force a redraw.
var n = document.createTextNode(' ');
var disp = img.style.display;
img.appendChild(n);
img.style.display = 'none';
img.style.display = disp;
n.parentNode.removeChild(n);
Nothing seems to work. Is it because the page is loaded or is it because I am using a local file?
The local file is in %AppData%\temp, could this be a permission problem? The browser console doesn't throw any error. I do not want to refresh the entire page since someone could be typing in a form and they're going to lose their data.
Any input would be appreciated. Thanks.
EDIT : A bit of clarification.
I use an extension to inject a script in every window. Once a window loaded a page I send the images to another script for processing, the script then returns an event to the window with a location to a new file. Once the event is caught, a function is called to change the src attribute of a particular image. I've checked everything, the src is changed but the browser doesn't display the new image.
Another edit :
There doesn't seem to be a permission problem since I can access the file from the address bar using file:///pathtofile/. With external urls (e.g. http://) it seems to work even after page load. How can I make it work with local urls?

Firefox does not allow untrusted pages to load data from file:// URIs in any way. That includes loading images from file:// URIs.
To see why, consider what happens if a page does <img src="file:///dev/tty"> on Linux or Mac, for example. Similar issues exist on some Windows versions if you try to read from file:///c:/con and the like...

What's the simplest way to get an image to print in a new window when clicked?

I'm trying to create a simple click to print link for an image, and what I'd like to happen is when the link is clicked, a new window opens with the image, and the browser opens the print command dialogue box.
My question is whether this is possible just from a URL parameter, or from the anchor element on the initiating page? Or do I have to build a target page with javascript to do this?
Here's a sample of what I've got:
<p class="click-2-print">
Click here to print the map above
</p>
Obviously the code above will open the image in a new window, but still requires to user to hit Ctrl+P, Cmd+P or use the browser commands. My client wants the image to "just print" when the user clicks the link, so I'm trying to find the simplest way to accomplish this.
So is there any parameters or attributes that I can add to the above markup to accomplish what I have described?

You'll have to call window.print(). Perhaps something like this?
function printimage(){
var URL = "http://myimage.jpg";
var W = window.open(URL);
W.window.print();
}
Another option may be to put the image on a page that tells the browser to print when loaded. For example...
<body onload="window.print();">
<img src="/img/map.jpg">
</body>

Cody Bonney's answer will not work in certain browsers if the full url includes the image extension. The browser will automatically download it as soon as the new tab opens. You can get around this like so.
var url = scope.src;
var w = window.open('', '');
w.document.write('<html><head>');
w.document.write('</head><body >');
w.document.write('<img id="print-image-element" src="'+url+'"/>');
w.document.write('<script>var img = document.getElementById("print-image-element"); img.addEventListener("load",function(){ window.focus(); window.print(); window.document.close(); window.close(); }); </script>');
w.document.write('</body></html>');
w.window.print();
This will open a new page with the image, prompt the user to print, and after printing, close the new tab and reset focus to the original tab.
Disregard the scope.src that is angular specific code. Everything else should work as long as you provide your own url value from somewhere else

I would recommend you create a page in whatever language or framework you are working in that accepts a querystring argument for the image path, output that image in the document and have an onload / ready call to window.print(). Link to that instead of the image directly, and keep the target="_blank" and you should be set.

You have to call window.print() in javascript to trigger the browser print dialog. I'm pretty sure you can't trigger a print without user interaction unless you run a signed applet.

Hey Jag. Although its not exactly what you are looking to do, I did write this tutorial while I was working at a web design firm. You can probably rummage that code to get the link that prints the image. Basically what this code does it add a print button to the fancybox jquery plugin. I dont see why you couldnt just use the print part to add it to whatever you need. Hope it helps.
Add print ability to fancybox jquery plugin