I fire a function on jQuery(document).ready() and on jQuery(window).load(). Both the same function. It is supposed to fire an image resize script.
However, sometimes, when the server is slow to respond, the script doesn't fire at all when the page is done loading.
I've been having this problem for quite a while now, and, maybe it's overkill, but by now, I call the function as shown below, in both the document ready and the window load:
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
The function it calls is:
jQuery.fn.resizeImage = function() {
console.log('fired');
var bgImg = jQuery(this);
/* get img sizes */
var imgwidth = bgImg.width();
var imgheight = bgImg.height();
/* get window sizes */
var winwidth = jQuery(window).width();
var winheight = jQuery(window).height();
/* get the ratio, checks wether window is bigger or smaller than the image */
var widthratio = winwidth / imgwidth;
var heightratio = winheight / imgheight;
/* checks the difference */
var widthdiff = heightratio * imgwidth;
var heightdiff = widthratio * imgheight;
/* if you want the entire image to always fit the screen, change the > to < */
if(heightdiff>winheight) {
bgImg.css({
width: winwidth+'px',
height: heightdiff+'px',
marginLeft: '-'+winwidth/2+'px'
});
} else {
bgImg.css({
width: widthdiff+'px',
height: winheight+'px',
marginLeft: '-'+widthdiff/2+'px'
});
}
};
Using the console.log, I found that the function doesn't fire at all.
Can anyone point me in the right direction as to why this might not work?
Guess you're miss using the this
jQuery('img', '.background').each(function(){
var $self = $(this);
$self.load(function(){
$self.resizeImage();
});
});
Solved it myself.
The issue was in the following:
jQuery(window).load(function(){
jQuery('img', '.background').each(function(){
jQuery(this).load(function(){
jQuery(this).resizeImage();
});
});
});
Due to the double load (jQuery(window).load and jQuery(this).load) the code didn't execute at all. Since when the window is loaded, the images are already loaded as well.
Related
So I have this html / css / jQuery / js code that toghether shows a VERY large image in width. The base element should be invisible untill the image is loaded and set. Then the base element is made visible by a small fade.
However the behaviour is a little different.
Once the image is being loaded i can see the small text fading in and it takes a few seconds before then the image just pops up in once (not loading style like from top to bottom appearing)
This is the simplified code i use:
<script>
$(function() {
$("#base").hide();
var baseHeight = $(window).height();
var backLayerSRC = $('#img').attr('data-src');
$('#base').height(baseHeight);
var img = new Image();
var imgWidth, imgHeight;
img.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
var factor = 1 * baseHeight / imgHeight;
totalWidth = Math.round(factor * imgWidth);
currentWidth = totalWidth;
$('#base').width(totalWidth);
$('#img').attr('src', backLayerSRC);
$('#img').height(baseHeight);
$('#base').fadeIn(500);
};
img.src = backLayerSRC;
});
</script>
<style>
#base {
position:absolute;
left:0px;
height:100%;
}
#base #img {
position:absolute;
left:0px;
top:0px;
}
</style>
<div id='base'>
some tekst
<img src='' id='img' data-src='path_to_very_large/image.png' />
</div>
Now, how could it be that it just doesn't fade in WITH the image?
Here is an example WITH the image, please check so it becomse clear what i mean
http://jsfiddle.net/uz8mvtap/3
It might depend on the time the browser needs to render the image after the script loaded it.
I played a little with your fiddle and came up with this:
$(function() {
$("#base").css({opacity: 0});
var baseHeight = $(window).height();
var backLayerSRC = $('#img').attr('data-src');
$('#base').height(baseHeight);
var img = new Image();
var imgWidth, imgHeight;
img.onload = function() {
imgHeight = this.height;
imgWidth = this.width;
var factor = 1 * baseHeight / imgHeight;
totalWidth = Math.round(factor * imgWidth);
currentWidth = totalWidth;
$('#base').width(totalWidth);
$('#img').attr('src', backLayerSRC);
$('#img').height(baseHeight);
$('#base').delay(1000).animate({opacity: 1.0},500);
};
img.src = backLayerSRC;
});
Basically using opacity for such a purpose is better because #base continues to occupy the same space, not disrupting the page. And the delay is for the browser, I figured for a big image it takes time to render, so let's give it it.
You could do that.
$('<img />').load( function(){
console.log('loaded');
}).attr('src', imgUrl);
After it loads, it summons a callback, use that callback to do custom function. Let me know how it goes.
or, by the way. You could enter image width and image height into custom var, and compare them on the load, once it reaches your wanted width and height, fade it in.
You seem to be slightly misinterpreting the timeline of your code:
Page loads, (text is visible on screen)
jQuery kicks in, hides #base (text is not visible on screen)
jQuery fades in #base (text is visible on screen again)
This is why you are briefly seeing the text before the image loads - because it is not initially hidden.
Add:
display: none;
To your #base style, add keep the rest of your code the same.
Also I've created an alternative JavaScript solution after you have added the above CSS:
$(function() {
const base = $("#base"),
img = $("#img"),
backLayerSRC = img.attr('data-src'),
baseHeight = $('#base').height();
img.attr('src', backLayerSRC);
img.one("load", () => {
img.height(baseHeight).promise().done(() => { base.fadeIn(2500); });
});
});
Here is the working example of your code I have created:
https://codebrace.com/editor/b16cabfee
Your baseHeight variable is undefined.
May be you should change
$('#base').height(baseHeight);
to
var baseHeight = $('#base').height();
Update:
I have updated the solution. I this solution I have wrapped div around both the text and image. Div wrapped around image is set to position:relative; to keep the image(set to absolute position) from covering the text.
https://codebrace.com/editor/b16f33afb
I'm using jquery to resize an image on a mobile website: http://www.loiristorantino.com.br/mobile
On browser, if you resize your screen, it works fine but on mobile it's not working. Here's the code that I'm using:
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
var doit;
function resizedw(){
var $inner = $('.inner');
var height = parseInt($inner.height()) + parseInt($inner.css('top'));
$('.tumb-img-border').css('height', height);
}
window.onresize = function() {
clearTimeout(doit);
doit = setTimeout(function() {
resizedw();
fontResuze();
}, 100);
};
I think it's something related with Jquery but I don't know how to change it to javascript.
Can you guys help me with this issue?
Ok, so I found the solution by myself. Since I got this resize function on google, this solution might help others. I just changed the following line and it worked:
//var height = parseInt($inner.clientHeight());// + parseInt($inner.css('top'));
var newheight = $('.inner').height();
$('.tumb-img-border').css('height', newheight);
I have an event listener that looks like:
window.addEventListener("resize", function(data){
console.log(data);
// Do something
});
Is there anyway to get the before resize innerWidth / innerHeight in the above callback function? I went through the data object in the above code and didn't find anything there.
I ended up saving the old width value every time a browser resize event happened. Code looks like:
var initialWidth = window.innerWidth;
window.addEventListener("resize", function(){
// Do something with 'initialWidth'
initialWidth = window.innerWidth;
});
In the above, I save the browser width on page load. Then, every time the browser gets resized, I save the new browser width at the end of the callback function.
You can't, you have to store previous height/width in some variables. Just put it in variables on page load and then you can access it in this method. There is nothing like bofore resize.
read this
Just add something to track the last resize event values:
var windowSize = (function () {
var lastWidth = 0, lastHeight = 0;
window.addEventListener('resize', function (data) {
// do something with last values
...
console.log(lastWidth);
console.log(lastHeight);
...
lastWidth = window.innerWidth;
lastHeight = window.innerHeight;
});
return { width: lastWidth, height: lastHeight };
})();
Now, you can use the windowSize object outside the closure to find what the current window size is, and internally within the closure you can act upon the previous size of the window before updating lastWidth and lastHeight.
Hope this helps!
I have a function that change the size of the iframe every time a new content is loading.
It works fine, but there is a little problem:
If I open a big content the size change to it correct hight. If I load after that a smaller content, the height stays the same(from the big content), it isn't getting shorter.
I don't know why, how can I fix it?
$("#mainframe").load( function () {
var c = (this.contentWindow || this.contentDocument);
if (c.document) d = c.document;
var ih = $(d).outerHeight() + 10;
var iw = $(d).outerWidth();
$(this).css({
height: ih,
width: iw
});
});
James here. I'm working on a project (actually two projects that both require the same code) that deals with posts, except the content is always 100% of the users screen, and uses jquery to divide the width to make the same amount of columns no matter what screen resolution. I'm having a trouble with video posts however. If anyone could help me write (or write, that'd be way more helpful) a script that forces a default 500px video to the width of the posts? The script that I'm using to divide posts is as follows. Any answers at ALL would be helpful. Oh and I'm bumping this because it's almost a week old, and I have still not received a working script.
var container = function(){
var posts = $(document).width() - 40;
var entry = (posts - 200) / 5;
$("#posts").css("width", posts);
$(".entry").css("width", entry);
$("img.photo").css("width", entry - 22);
}
container();
The site I'm doing this on is http://jamestestblog5.tumblr.com
Thank you to anyone who can help with this, it's REALLY bothering me!
Hiya please see demo here : http://jsfiddle.net/ytcAk/
you can read the logic when you click grow button.
fork from old solution. :) (please let me know if this is what you are looking for if not I will remove this post)
Jquery code
function increaseVideoSize() {
var columnWidth = 450; // width of your content column - any
var defaultVideoWidth = 400; // theme tag width - 400,500
var increaseRatio = columnWidth/defaultVideoWidth;
$(".video-post").each(function() {
var iframe = $("iframe", this);
if(iframe.length>0) {
var currHeight = iframe.height();
var newHeight = currHeight * increaseRatio;
iframe.height(newHeight).width(columnWidth);
} else {
var object = $("object", this);
var embed = $("embed", object);
var currHeight = object.attr('height');
var newHeight = currHeight * increaseRatio;
object.width(columnWidth).attr('height', newHeight);
embed.width(columnWidth).attr('height', newHeight);
};
});
};