Script Not Working on Website But Working on JsBin, Jsfiddle After One Refresh
Question
This is a simple jquery script which finds a image greater than 300px and show url in paragraph. And this code working on online editor sites like jsbin but same code not working on website.
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<main>
<p>
</p>
<img src="http://icons.iconarchive.com/icons/icons-land/metro-raster-sport/128/Soccer-Ball-icon.png">
<img src="http://www.iconarchive.com/download/i65352/icons-land/metro-raster-sport/American-Football-Ball.ico">
<img src="http://simpleicon.com/wp-content/uploads/football.png">
</main>
<script>
$(function() {
$('main img').each(function() {
$Height = 300;
if ($(this).height() > $Height) {
$image = $(this).attr('src');
$('p').text($image);
return false;
}
});
});
</script>
</body>
</html>
But if you change Only the greater-than sign to less-than sign in jquery if statement, then script will work on both website and online editor and showing image url everytime you refresh it.
How to make this script work to also display a image url which is greater than some pixels?
I found a way which makes it work also on website: Running the script in
$(window).on("load",function(){
}
5 answers
solution1
0 2016-06-17 05:02:40
The jQuery code executes as soon as the DOM is ready— it does not wait for the images to load! Therefore, none of the images have a height when the script searches for them.
When you refresh, the images are loaded instantly from the cache, in time for jQuery to catch them.
Take a look at this StackOverflow thread for an idea of how to trigger your function in response to each image's onload event!
eg,
$('main img').on('load', function(){
if ($(this).height() > 300)
$('p').text($(this).attr('src'))
;
});
Note that this code should supplement the code you've already written, since the jQuery documentation points out how the load event can fail to fire if the images are already in the cache.
solution2
0 2016-06-17 05:11:34
Your code works before images are loaded. You should give it a bit delay . Try this;
$(function() {
setTimeout(function(){
$('main img').each(function() {
$Height = 300;
if ($(this).height() > $Height) {
$image=$(this).attr('src');
$('p').text($image);
return false;
}
});
},150);
});
solution3
0 2016-06-17 05:36:30
calling .widht() or .height() also calculates padding assigned to the element.
try remove padding from the element, or you can simply subtracts the padding from the element
ie;
remove padding:
main > img{padding: 0;}
Calculate the image height and remove padding:
$(function() {
$img = $('main img');
$img.each(function() {
var tp = parseInt($img.css('padding-top'), 10);
var bp = parseInt($img.css('padding-bottom'), 10);
$Height = 300;
if ($(this).height() - (tp + bp) > $Height ) {
$image=$(this).attr('src');
$('p').text($image);
return false;
}
});
});
Hope this will help. :)
solution4
-1 2016-06-17 05:07:30
just add https: before //ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js and then try.
note : your system must be connected to the internet or provide system file url for jquery.min.js
solution5
-1 2016-06-17 05:23:26
Javascript in both JSBin links are same,there is no differences.
If you want your function to work properly just add "$(document).ready" on your function like:-
$( document ).ready(function() {
$('main img').each(function() {
$Height = 300;
if ($(this).height() > $Height) {
$image=$(this).attr('src');
$('p').text($image);
return false;
}
});
});
Hope,this will for both web & JSBin. Please read: - https://learn.jquery.com/using-jquery-core/document-ready/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.