Tôi đang viết một số Javascript để thay đổi kích thước hình ảnh lớn cho vừa với cửa sổ trình duyệt của người dùng. (Rất tiếc, tôi không kiểm soát kích thước của hình ảnh nguồn.)
Vì vậy, một cái gì đó như thế này sẽ có trong HTML:
<img id="photo"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
Có cách nào để tôi xác định xem srchình ảnh trong imgthẻ đã được tải xuống chưa?
Tôi cần điều này vì tôi đang gặp sự cố nếu $(document).ready()được thực thi trước khi trình duyệt tải hình ảnh. $("#photo").width()và $("#photo").height()sẽ trả về kích thước của trình giữ chỗ (văn bản thay thế). Trong trường hợp của tôi, đây là một cái gì đó giống như 134 x 20.
Hiện tại, tôi chỉ đang kiểm tra xem chiều cao của bức ảnh có nhỏ hơn 150 hay không và giả sử rằng nếu có thì đó chỉ là văn bản thay thế. Nhưng đây là một vụ hack và nó sẽ bị hỏng nếu ảnh cao dưới 150 pixel (không có khả năng xảy ra trong trường hợp cụ thể của tôi) hoặc nếu văn bản thay thế cao hơn 150 pixel (có thể xảy ra trên một cửa sổ trình duyệt nhỏ) .
Chỉnh sửa: Đối với bất kỳ ai muốn xem mã:
$(function()
{
var REAL_WIDTH = $("#photo").width();
var REAL_HEIGHT = $("#photo").height();
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(REAL_HEIGHT < 150)
{
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
if(REAL_HEIGHT < 150)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
Cập nhật : Cảm ơn vì những đề xuất. Có nguy cơ sự kiện không được kích hoạt nếu tôi đặt lệnh gọi lại cho $("#photo").loadsự kiện, vì vậy tôi đã xác định sự kiện onLoad trực tiếp trên thẻ hình ảnh. Đối với bản ghi, đây là mã tôi đã kết thúc với:
<img id="photo"
onload="photoLoaded();"
src="a_really_big_file.jpg"
alt="this is some alt text"
title="this is some title text" />
Sau đó trong Javascript:
//This must be outside $() because it may get called first
var isPhotoLoaded = false;
function photoLoaded()
{
isPhotoLoaded = true;
}
$(function()
{
//Hides scrollbars, so we can resize properly. Set with JS instead of
// CSS so that page doesn't break with JS disabled.
$("body").css("overflow", "hidden");
var REAL_WIDTH = -1;
var REAL_HEIGHT = -1;
$(window).resize(adjust_photo_size);
adjust_photo_size();
function adjust_photo_size()
{
if(!isPhotoLoaded)
{
//image not loaded.. try again in a quarter-second
setTimeout(adjust_photo_size, 250);
return;
}
else if(REAL_WIDTH < 0)
{
//first time in this function since photo loaded
REAL_WIDTH = $("#photo").width();
REAL_HEIGHT = $("#photo").height();
}
var new_width = . . . ;
var new_height = . . . ;
$("#photo").width(Math.round(new_width));
$("#photo").height(Math.round(new_height));
}
});
max-widthvàmax-heighttạo kiểu hình ảnh với Javascript? Sau đó, bạn tránh TẤT CẢ mã bạn cần viết bằng cách đặt chiều rộng / chiều cao tối đa thành kích thước của chiều rộng / chiều cao khung nhìn.