I have asked this question couple times, but non of the suggestions seems to be working.
I am using jstree plugin to build the tree. Based on the node_id, I am trying to load images to some divs. It kinda works but, I am having sporadic image display issues. Sometimes, I have to double click, sometimes single click shows the images.
I tried this:
img1 = new Image;
img1.src="teamA.png";
img2 = new Image;
img2.src="teamB.png";
img1.onload = function()
{
$("#div1").html(img1;
}
etc, but this is not working. I still see sporadicly images are now showing up on the divs.
I started looking at jquery plugin imgpreload as this:
$.imgpreload(['img1','img2', 'img3','img4','img5','img6'],
{
each: function() {
$(this).data('loaded')
$("#div1").html(img1);
}
});
this does not seem to be working either, any ideas or points?
I have done this:
$(function () {
var myImage1 = new Image();
$(img1)
.load(function () {
});
.attr('src', 'teamA.png');
});
getting syntax errors. Does this seem ok to you?
* updated * I modified the code as this:
$(function () {
var myImage1 = new Image();
$(myImage1).load(function ()
{
})
.attr('src', 'teamA.png');
alert(myImage1.width);
$('#div1').html("myImage1").css({"border": "0", "background": "white"});
}
Right after the load function, I am doing a:
alert(myImage.width) to see the size of the image, it is coming back at 0, so this does not seem to be working. There is definetely image.
update v2
$(function () {
var myImage1 = new Image();
$(myImage1).load(function ()
{
alert(myImage1.width);
$('#div1').html("myImage1").css({"border": "0", "background": "white"});
})
.attr('src', 'teamA.png');
});
ok, this code works assuming that the image is there. But I like to do is if the image is not there, I like to hide that div. I have this code, but it is not working on load event. How can I hide the divs that are empty?
$(function ()
{
var myImage1 = new Image();
$(myImage1).load(function ()
{
var image1Check = myImage1.width;
if (image1Check == 0 || image1Check < 30)
{
$('#div').html("").css("border", "");
}
else
{
$("#div1").html(myImage1).css("border","1px solid");
}
})
.attr('src', teamA.png);
});
Bind the load event before setting the src, and to handle a missing image, use .error()
$(function () {
var myImage1 = new Image();
$(myImage1).load(function () {
$("#div1").html(myImage1).css("border","1px solid");
}).attr('src', "teamA.png").error(function(){
$('#div1').html("").css("border", "");
});
});
You have to use $(this).data('loaded') in an if:
each: function() {
if ($(this).data('loaded')) {
// do something
}
},
Related
I am trying to call a function after the image loads completely in DOM.
The image structure is created dynamically on AJAX call success and the image url is also added in success using the result of API call.
Problem:
I want to call a function after the image loads completely in DOM.
To do this I have used JQuery load event.
Function which is called on load.
function carouselHeight() {
$('.home-banner-img-container').each(function() {
var $this = $(this);
var dynamicheight = $(this).parent();
var sectionInnerHeight = $this.innerHeight();
dynamicheight.css({
'height': sectionInnerHeight
});
});
}
I have tried below steps but it didn't worked
$(window).on('load', function() {
carouselHeight();
});
$(window).on('load', 'img.image-preview', function() {
carouselHeight();
});
$(document).on('load', 'img.image-preview', function() {
carouselHeight();
});
The first method $(window).on('load', function() {}) works perfectly on hard reload but on normal reload it is not able to find $('.home-banner-img-container') element which is inside of carouselHeight function.
Please help me to find a solution for this. Thank you.
I have found the solution on stack overflow where I have added the below code in ajax call complete method.
function imageLoaded() {
// function to invoke for loaded image
// decrement the counter
counter--;
if( counter === 0 ) {
// counter is 0 which means the last
// one loaded, so do something else
}
}
var images = $('img');
var counter = images.length; // initialize the counter
images.each(function() {
if( this.complete ) {
imageLoaded.call( this );
} else {
$(this).one('load', imageLoaded);
}
});
I'm trying to resize an image using addEventListener. I searched for this question and found similar ones but I haven't been able to make the function work properly.
The following code demonstrates a working function that resizes the image.
header.onload=function(){
var fullHeaderWidth=this.width
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
setInterval(function(){
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
else
header.width=fullHeaderWidth;
},50)
};
But when I try to use this function...
var header=new Image();
header=document.getElementById('header');
header.onload=function(){
var fullHeaderWidth=this.width
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
};
header.src='file:///C|/Users/Dillon/Development/Jesses Works/header.gif'
window.addEventListener('resize',function(){
if(fullHeaderWidth>window.innerWidth)
header.width=window.innerWidth;
else
header.width=fullHeaderWidth;
},false)
The event fires (I know this because I used alert in the function), but the image will not resize. Any ideas?
You're getting confused, I think you're trying to do something like this:
window.addEventListener('load', function () {
setInterval(function () {
var fullHeaderWidth = this.width;
if (fullHeaderWidth > window.innerWidth) {
header.width = window.innerWidth;
} else {
header.width = fullHeaderWidth;
}
}, 50);
});
I have two images: static and animated. I am trying to play that animated image but only once. After that, it will change to static one.
My Code:
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
$("#divthree_three").attr('src', srcToGif2);
});
});
Fiddle : http://jsfiddle.net/squidraj/33Sqd/
Currently, it is not stopping after the first animation.
Latest fiddle with single animated loop gif.
http://jsfiddle.net/squidraj/4rC8D/1/
Now can't see the animation though the img src is changing.
If you want this animated GIF to be played only once, modify it in Photoshop. Go to Window > Timeline, then select looping options (bottom left corner):
Save for web as GIF and voila!
Working Fiddle
Try This:
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
[].slice.apply(document.images).filter(is_gif_image).map(freeze_gif);
function is_gif_image(i) {
return /^(?!data:).*\.gif/i.test(i.src);
}
function freeze_gif(i) {
var c = document.createElement('canvas');
var w = c.width = i.width;
var h = c.height = i.height;
c.getContext('2d').drawImage(i, 0, 0, w, h);
try {
i.src = c.toDataURL("image/gif"); // if possible, retain all css aspects
} catch(e) { // cross-domain -- mimic original with all its tag attributes
for (var j = 0, a; a = i.attributes[j]; j++)
c.setAttribute(a.name, a.value);
i.parentNode.replaceChild(c, i);
}
}
});
});
For getting desired effect you can setTimeout to trigger click event #targetDIV_three
Chnage your code to this. A timeout is set to set the old gif again.
$(document).ready(function () {
$('#targetDIV_three').bind('click mousedown', function () {
srcToGif2 = "http://demo.pink-squid.co.uk/christmas/s3.gif";
$("#divthree_three").attr('src', srcToGif2);
setTimeout(function(){
$("#divthree_three").attr('src', "http://demo.pink-squid.co.uk/christmas/s3_bg.gif");
},900);
});
});
http://jsfiddle.net/33Sqd/2/
i am still new to all the Javascript stuffs and i have to be honest that i have not yet experimented anything concerning my question.
I would like to know if there is a way or a plugin with jQuery to preloaded multiples images and call a function when the images are loaded?
You can use the load event for images, but they have a number of cross browser issues (it depends on what platforms you're targeting).
var allImgs = $("#container img").filter(function() { return ! this.complete; });
var allImgsLength = allImgs.length;
allImgs.on("load", function() {
if (--allImgsLength) {
// Images have loaded.
}
});
If you don't mind including a plugin, there is waitForImages, (disclaimer: written by me) which handles this relatively nicely. :)
You'd use it like...
$("#container").waitForImages(function() {
// Images have loaded.
});
If you don't want to use jQuery at all, you can adapt the first example. If you're only targeting modern browsers...
var allImgs = [].filter.call(document.querySelectorAll("#container img"),
function(img) {
return ! img.complete;
});
var allImgsLength = allImgs.length;
[].forEach.call(allImgs, function(img) {
img.addEventListener(function() {
if (--allImgsLength) {
// Images have loaded.
}
});
});
If you had to support old browsers...
var allImgs = document.getElementById("container").getElementsByTagName("img");
var allImgsLength = allImgs.length;
var i;
var eventCallback = function() {
if (--allImgsLength) {
// Images have loaded.
}
};
for (i = 0; i < allImgsLength; i++) {
if (allImgs[i].complete) {
allImgsLength--;
}
if (allImgs[i].addEventListener) {
allImgs[i].addEventListener("load", eventCallback);
} elseif (allImgs[i].attachEvent) {
allImgs[i].attachEvent("onload", eventCallback);
} else {
allImgs[i].onload = eventCallback;
}
}
I'm using the Pixastic plugin in JavaScript. I have a table filled with images that are blurred. When I go over them with the mouse I want them to get normal. And when the mouse leaves an image I want it to blur back. For some reason my code doesn't work. Here's the code:
Before, I copied the wrong code part, and I apologize for that this one is the one I'm asking about.
<script type="text/javascript">
$(document).ready(function(){
$('.photography').live('mouseover mouseout', function(event) {
if (event.type == 'mouseover') {
function () {Pixastic.revert('this');};
}
else {
function(){Pixastic.process('this', "blurfast", {amount:0.5});};
}
});
});
</script>
OK, so I managed to find my old code that actually works half way (when I hover over the image for the first time it works, but when I try for the second time it doesn't).
$(document).ready(function(){
var blur = function() {Pixastic.process(this, "blurfast", {amount:0.5});};
var unblur = function () {Pixastic.revert(this);};
$('.photography').each(blur);
$('.photography').hover(unblur,blur);
});
OK, so now I'm also adding the code for the function called revert:
revert : function(img) {
if (Pixastic.Client.hasCanvas()) {
if (img.tagName.toLowerCase() == "canvas" && img.__pixastic_org_image) {
img.width = img.__pixastic_org_width;
img.height = img.__pixastic_org_height;
img.getContext("2d").drawImage(img.__pixastic_org_image, 0, 0);
if (img.parentNode && img.parentNode.replaceChild) {
img.parentNode.replaceChild(img.__pixastic_org_image, img);;
}
return img;
}
}
else
if (Pixastic.Client.isIE()) {
if (typeof img.__pixastic_org_style != "undefined")
img.style.cssText = img.__pixastic_org_style;
}
}
So yesterday my friend discovered how this could be done ... the problem was that the plugin converts images into canvas anyway her's the code :
$(document).ready(function(){
$('.pic').each(function(){
this.onmouseout = function(){
var canvas1 = Pixastic.process(this, "blurfast", {amount:0.5});
canvas1.onmouseover = function(){
Pixastic.revert(this);
}
}
this.onload = function(){
var canvas = Pixastic.process(this, "blurfast", {amount:0.5});
canvas.onmouseover = function(){
Pixastic.revert(this);
}
}
});
});
Try doing this
$('.photography').live('mouseenter', function(event){
Pixastic.revert(this);
}).live('mouseleave', function(event){
Pixastic.process(this, "blurfast", {amount:0.5});
});