Develop Reference

How can I find and remove some image element which has a broken link?

I have hosted my site on Wordpress. and recently I have been facing the problem of an image link broken in my site. I don't know when it's happened. The problem arises in the only post section.

There are some ways to do that, but if you don't know where to start, you can try this with javascript:
function findToDeleteBrokenImages() {
var images = Array.from(document.querySelectorAll("img"));
for (var image of images) {
var img = new Image();
img.onerror = function () {
image.parentElement.removeChild(image);
};
img.src = image.src;
}
};
findToDeleteBrokenImages();
<img src="foo" />
But notice that, there are serveral ways to display an image, too. So, if your image is shown as a background of some div element or canvas, you can use the same logic of the code above, but the way to remove/delete that element is different.

Determine when an image has loaded in svg with RaphaelJS

I'm trying to work out how to determine when an svg image has loaded in the browser. I'm using Raphael JS and I've tried:
var image = paper.image(path, 0,0,10,10);
image.node.addEventListener('load', function(){alert("test");});
and:
$('image').on('load')
all to no avail. I've also used "onload" and "onsvgload" none of which work.
Is there away to determine if an svg image has actually loaded?
I even tried loading the image using an Image() object and then calling paper.image() - but I get two calls to the image (instead of using the preloaded image);
ie:
var preload = new Image();
preload.src = imgPath;
preload.addEventListener('load', function () {
image.path = preload.src;
//Now load image in raphael - except this still forces the browser to make another call for the image
});
Any ideas?

Using the onLoad event handler works, with one additional line of code:
var image = paper.image(path, 0,0,10,10);
var image_node = image.node;
image_node.setAttribute('externalResourcesRequired','true');
image_node.addEventListener("load", function() {
console.log("image is loaded!");
})
You need to set the externalResourcesRequired attribute to true. You may read more about it here: http://www.w3.org/TR/SVG/struct.html#ExternalResourcesRequired

jQuery image preload

I got a web application, in which there are some images.
Will show a overlay in my page at start and that will automatically fadeout on all images loades.
I need something like this
its rough code
var image1="image1.jpg";
var image2="image2.jpg";
var image4="image4.jpg";
image1 & image2 & image4 loaded then fadeout #preload and show content.
Please help me ... I tried this .. but not working ..
var img1 = new Image();
img1.src = "../images/wall.jpg";
img1.onload = function() {
alert("loaded");
};

var images_loading = $('img').length;
$('img').load(function(){
if(!--images_loading) {
// all images loaded
}
});
Please mind you can't use display:none to hide images.
Using display:none will block image download by your browser. User visibility:hidden instead.

Try this fiddle. I've made it using mostly raw javascript.
If you want, you could use jQuerys .load to replace the onload function, and append to replace appendChild

load page in div via javascript

Am Sure this question has been asked many times, but i need to do the following
<script language="javascript">
var one = 888;
var two = 122;
var three = "ABC";
</script>
I need to send those and return the data in a DIV (it will be an image)
I dont wont to use jQUERY or any other plugin
http://www.example.com/yes?one=888&two=122&three=ABC

I am not sure exactly what you are trying to do. This will set the src of an image to what you asked for and add it to the div.
img = new Image();
img.src = 'http://www.example.com/yes?one=' + one + '&two=' + two + '&three=' + three;
document.querySelectorAll('#idOfDiv').appendChild(img)

jQuery make it simple, but if you want you can do it in pure JS. Read official w3c ajax tutorial:
http://www.w3schools.com/ajax/ajax_xmlhttprequest_create.asp
http://www.w3schools.com/ajax/ajax_xmlhttprequest_send.asp
http://www.w3schools.com/ajax/ajax_xmlhttprequest_response.asp

Preloading images with Prototype/Scriptaculous

I'm using Prototype/Scriptaculous library for a featured content slider, it works great but the images need to be preloaded.
I've used jQuery mostly so I'm not sure how its done with Prototype. Here's the slider script if you'd like to take a look.

You can do this with a few simple lines of Javascript
var preload = []
for(var x=0;x<slider_images.length;x++) {
preload[x] = new Image()
preload[x].src = slider_images[x]
}