在jQuery中执行此操作时:
$(function() {
alert("DOM is loaded, but images not necessarily all loaded");
});
它等待DOM加载并执行您的代码.如果未加载所有图像,则它仍然执行代码.如果我们正在初始化任何DOM内容,例如显示或隐藏元素或附加事件,这显然是我们想要的.
让我们说虽然我想要一些动画但我不希望它运行直到所有图像都被加载.jQuery中是否有正式的方法来执行此操作？
我有最好的方法就是使用<body onload="finished()">,但除非必须这样做,否则我真的不想这样做.
注意:Internet Explorer 中的jQuery 1.3.1中存在一个错误,它实际上会在执行内部代码之前等待加载所有图像$function() { }.因此,如果您正在使用该平台,您将获得我正在寻找的行为,而不是上述正确的行为.
如何加载DOM中的所有图像时触发事件？我google了很多.我发现了这个,但它似乎不起作用:
在
<div id="all-images">
<img src="images/1.jpg">
<img src="images/2.jpg">
<img src="images/3.jpg">
<img src="images/4.jpg">
<img src="images/5.jpg">
<img src="images/6.jpg">
</div>
我想显示所有id ="all-images"的图像,只有当这个id里面的所有图像都完全加载时(Jquery).
在加载所有图像之前,此部分显示"正在加载..."文本
我正试图在jQuery中实现类似照片轮播的东西.这个轮播可以使用图像源数组填充图像(我发出一个ajax请求,返回带有此数据的json),一旦填充,你可以调用几个方法,previous()和next()来移动转盘分别向后和向前.
问题是这个功能已经实现并且正常工作,但我无法解决调整大小过程的问题.为了避免图像超出容器的边界,我有一种方法可以根据需要创建和调整图像大小.
this.getImageResized = function(imageSrc) {
var image = $('<img />', {src : imageSrc});
// Container ratio
var ratio = this.itemMaxWidth / this.itemMaxHeight;
// Target image ratio is WIDER than container ratio
if((image[0].width / image[0].height) > ratio) {
if(image[0].width > this.itemMaxWidth) {
image.css('width', this.itemMaxWidth + 'px');
image.css('height', 'auto');
}
// HIGHER
} else {
if(image[0].height > this.itemMaxHeight) {
image.css('width', 'auto');
image.css('height', this.itemMaxHeight + 'px');
}
}
// Embeds image into a wrapper with item's width and height
var wrapper = …我有一个容器,里面有一些图像,我想听每个图像完成加载的事件.
例如)
<div id="container">
<img src="..." />
<img src="..." />
<img src="..." />
<img src="..." />
</div>
我应该有4次"图像加载"事件.这该怎么做？
我遇到的问题是,当页面加载时,它有时会显示所有图像,有时只显示2个图像,有时甚至全部.我不知道为什么会这样.
有任何想法吗？
$('#banners .box img').each(function(index){
var randval = (index+1)*100;
var _this = $(this)
setTimeout(function(){
_this.attr('id' , 'banner' + index);
to_canvas('banner' + index, 300, 223);
}, randval)
});
to_canvas函数:
function to_canvas(im,w,h){
var canvas;
var imageBottom;
var im_w = w;
var im_h = h;
var imgData;
var pix;
var pixcount = 0;
var paintrow = 0;
var multiplyColor = [70, 116, 145];
var x_offset = Math.floor(($('#'+im).attr('width') - im_w)/2);
var y_offset = Math.floor(($('#'+im).attr('height') - im_h)/2);
imageBottom = document.getElementById(im);
canvas = document.createElement('canvas');
canvas.width = …我使用这个javascript调整大小,最大为800px,页面上的大(5Mb)图像:
<script type="text/javascript">
$(document).ready(function () {
$('.detailImg').each(function () {
var maxWidth = 800; // Max width for the image
var maxHeight = 800; // Max height for the image
var ratio = 0; // Used for aspect ratio
var width = $(this).width(); // Current image width
var height = $(this).height(); // Current image height
// Check if the current width is larger than the max
if (width > maxWidth) {
ratio = maxWidth / width; // get ratio for scaling …我正在用HTML5和JavaScript创建一个简单的游戏.
最初,当游戏开始时,需要一些时间来加载图像和声音.在此期间,用户必须等待并且屏幕看起来不愉快.
所以这就是我想要做的
检查图像和声音的加载状态.
加载资源时增加加载百分比,并分别增加进度条.
我真的没有任何关键从哪里开始.请指导我.
可能重复:
加载dom中的所有图像后jquery回调？
页面加载完成后,我使用以下脚本加载div:
<script type="text/javascript">
$(document).ready(function(){
$('#page_effect').fadeIn(1618);
});
</script>
但是,问题是fadeIn会在页面加载完成时触发,但不是所有图像.有没有办法改变它所以它会触发淡入淡出所有文件加载完成的那一刻？
谢谢.
jquery ×9
javascript ×5
image ×2
canvas ×1
css ×1
html ×1
html5 ×1
jquery-load ×1
load ×1
ready ×1