Print arbitrary set of images at runtime with jquery/javascript - javascript

Let's assume a bunch of images are preloaded via something like this:
function loadNextImage() {
var img = new Image();
img.src = '/path/to/imageN.jpg';
img.onload = function() {
if(stillLoading()) {
loadNextImage();
} else {
printLoadedImages();
}
}
}
What can be used for printLoadedImages() to make them print (ultimately as a series- one per page, but for starters let's just say one image)
When I try setting the image source to a div, I can see the image- but trying printThis or printArea jquery plugins did not do it... seems to expect that the image was loaded via page load, not at runtime

Related

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.

How to show loader overlay until image is loaded on webpage?

I want to make a loading overlay, but instead using setTimeout I would like to show the "loader" until the first image is fully loaded on the webpage. ( After that, I would like to use lazy image loading )
Until now I used setTimeout, but it's not working really well. I can set a bigger time, but now there is a "gap" between the loader and when the image appears.
The picture urls are fetched from a wordpress API and I'm using template.
What I want is to show the "loading" overlay until the first image is fully loaded, so users don't see the blank state.
var img = document.querySelector("#img");
img.onload = function(){
document.getElementById("loading").style.display = "none"
}
I can't use jQuery because it's for a school project. I tried all the alternatives I found here by adding a console.log("loaded") when it's loaded, but nothing seems to work.
Maybe set the img.src after you defined onload
let img = document.createElement('img');
img.onload = function(){}
img.src = "url"

Replace img src but have loading graphic display while image is downloading

I have a page that swaps some fairly large images in and out. There are too many to preload when the page initially loads so that is not an option. So what I need to do is load them as they are requested by the user. Right now I'm using jQuery to replace the img's src. This works fine but the images I am loading can be around 500KB and it looks bad as they paint down the screen as they are downloading. What I'd like to do is pop a loading gif on the page when the image is in the process of loading then have the loading gif disappear once the image is loaded. I'm struggling to find a way to do that though. Here is the JS/jQuery code that I have that just replaces the src.
var product = "bowl";
var image = "dog.jpg"; //this is actually pulled from a data attribute, but its just hardcoded here for an example
$("#images img[data-product="+product+"]").attr("src", "/img/tablesetting/"+image);
I made a working jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
I recently needed to do the same thing. Basically I wrapped the image in a container div. within the container I've added a span element with my ajax loader gif embedded. this span has to be hidden initially but gets visible when an ajax request is made. The span gets removed when the image is fully loaded.
before ajax call
$('#your_image_container').find('span').show();
on success
$('#your_image').attr('src', 'your/image/url').load(function() {
$('#your_image_container').find('span').fadeOut();
});
I made a jsfiddle showing this principle
http://jsfiddle.net/kasperfish/c72RT/4/
Preload the image.
var product = "bowl";
var imageSrc = "dog.jpg";
var imgEl = $("#images img[data-product="+product+"]");
// show loading graphic only if it's needed
var timer = setTimeout(function(){
imgEl.attr("src", "/img/loading.gif");
},50);
// preload image
var img = new Image();
img.onload = function() {
clearTimeout(timer);
imgEl.attr("src",imageSrc);
}
img.src = imageSrc;
$img.attr("src", newImage);
if (!$img.get(0).complete) {
$img
.hide()
.after("<img src=throbber>")
.on("load", function () {
$(this).show().next().remove();
});
}

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

Image preloading ... the fastest way

I'm working on a project dealing with a high traffic webpage (really high!). On landing page tons of images are displayed (~40), that needs to be there, right after the page was loaded to display them by fading in. We don't use any library for this since it should be loaded before it was ready to use. We have 4 image servers. Does anybody have any experience which is the best way to load images? I tried the following:
In page header, right after the <head>, inserted a script tag:
<script>
var img = new Image(); img.src= "src of the image";
</script>
Doing so, images begin and finish to load before DOMReady and Load event. But images on the page with the same url seem to load again, even if they was loaded before. The urls are the same, caching was on, Mozilla was used.
Maybe there's some mechanism that prevents the browser to use those images? or what?
Another question: does it cause any slowdown, when DOM and images load parallel?
First, I would recommend using CSS sprites. You can find more information here:
http://www.alistapart.com/articles/sprites
Second, if you want to load the images on DOM ready, use the following:
function listen(event, elem, func) {
if (elem.addEventListener) {
elem.addEventListener(event, func, false);
} else if (elem.attachEvent) {
elem.attachEvent('on' + event, func);
}
}
listen('load', window, function() {
var img = new Image();
img.src= "src of the image";
});
Using sprites will cut your loading time in half. You eliminate the majority of your HTTP requests and the sprite sheets get cached right away so each subsequent page a user visits will already have it loaded.
EDIT
Here's a way to preload many images:
function preload(images) {
if (document.images) {
var imageArray = [];
imageArray = images.split(',');
var imageObj = new Image();
for (var i = 0; i < imageArray.length; i += 1) {
imageObj.src = imageArray[i];
}
}
}
Call the function like this:
preload('image1.jpg,image2.jpg,image3.jpg');

Categories

Resources