Chrome 无法检测图片尺寸
Chrome not detecting image sizes
我正在尝试确保图像大于其查看宽度,然后在图像查看器中打开。但是,在 720p 分辨率和谷歌浏览器上,原始宽度和视口宽度的宽度都为 0......
下面是一个示例页面,其中图像应在BFX视图中打开(尝试在Chrome中以较低的分辨率打开):实时示例
日志(扫描的第一个图像是有问题的图像)
Starting BFX View Version 0.3 Build 61 alpha
bfxcore.js:92 BFX View -> Looking for images in: .postpreview...
bfxcore.js:92 BFX View -> Looking for images in: .content...
bfxcore.js:109 Image: http://media-cache-ec0.pinimg.com/originals/ed/e1/c7/ede1c78fe16fba4afd1606772a5fc1ac.jpg Original Width: 0 Against: 0
bfxcore.js:109 Image: images/smilies/wink.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/smilies/smile.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/primus/blue/misc/quote_icon.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/primus/blue/buttons/viewpost-right.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/smilies/wink.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/smilies/smile.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/primus/blue/misc/quote_icon.png Original Width: 0 Against: 0
bfxcore.js:109 Image: images/primus/blue/buttons/viewpost-right.png Original Width: 0 Against: 0
JavaScript
$(function(){
/****************************************************
/ BFX View version 0.3 build 56
/ by WASasquatch for BeeskneesFX.com
/***************************************************/
// Global vars
var appname = 'BFX View',
appflag = 'alpha',
appversion = 0.3,
appbuild = 61,
// Selectors
findImagesIn = new Array(
'.postpreview',
'.content',
'.restore',
'.postbody'
), // Master container class/id - all image tags in children elements get selected
// Theater selectors
theater = $('#theater-box'),
theaterimg = theater.find('#theater-img'),
theaterclose = theater.find('#theater-header span');
console.log('Starting '+appname+' Version '+appversion+' Build '+appbuild+' '+appflag);
if ( notMobile === false ) {
console.log(appname+' detected a mobile device. Disabling BFX View for performance. Visit us on a desktop!');
} else {
// Start a BFX View selector
for (i=0; i<findImagesIn.length; i++) {
console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...');
$(findImagesIn[i]).each(function(){
bfxView('.'+$(this).attr('class'));
});
}
}
function bfxView(id) {
var imgCount = 0;
$(id).each(function(){
$(this).find('img').each(function () {
var img = $(this),
width, height, origWidth = $(this).width();
hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images');
height = hiddenImg.height();
width = hiddenImg.width();
hiddenImg.remove();
console.log('Image: '+$(this).attr('src')+' Original Width: '+origWidth+' Against: '+width);
if ( width > origWidth ) {
imgCount++;
$(this).css('cursor', 'pointer');
var parent = $(this).parent();
if ( parent.attr('href') == $(this).attr('src') ) {
parent.attr('target','_self');
parent.removeAttr('href');
}
$(this).click(function () {
var startingPoint = $(document).scrollTop(),
theaterActive = true,
bodyo = $('body').css('overflow');
$('body').css('overflow', 'hidden');
theaterimg.html('<img src="' + $(this).attr('src') + '" alt="Medium View" />');
setTimeout(function(){
theaterimg.find('img').each(function(){
var renderWidth = $(this).width();
if ( renderWidth < width ) {
$(this).css('cursor', 'pointer');
theater.find('#viewfull').attr('href', '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href));
theater.on('click', '#theater-img img', function(){
window.location.href = '/viewer.html?src='+Base64.encode($(this).attr('src'))+'&t='+Base64.encode(window.location.href);
});
} else {
theater.find('#viewfull').remove();
$(this).attr('alt','Full Resolution View');
}
});
},0);
theater.fadeIn(1000, function () {
theaterclose.click(function () {
theater.fadeOut(1000, function() {
theaterActive = false;
});
$('body').css('overflow', bodyo);
});
});
});
}
});
});
console.log(appname+' -> '+imgCount+' images found in '+id);
}
});
我更改了搜索代码,旨在确保检查所有可能的类。用于开始搜索的旧代码是
for (i=0; i<findImagesIn.length; i++) {
console.log(appname+' -> Looking for images in: '+findImagesIn[i]+'...');
bfxView(findImagesIn[i]);
}
更新的代码仍然没有在Chrome上,并且在Firefox上通过此编辑损坏。这将告诉我"宽度"和"高度"没有定义,就像没有加载图像一样。
$(this).find('img').each(function () {
$(this).load(function(){
var img = $(this),
width, height, origWidth = $(this).outerWidth();
hiddenImg = img.clone().attr('class','').attr('id','').css('visibility', 'hidden').removeAttr('height').removeAttr('width').appendTo('#loading-images');
height = hiddenImg.height();
width = hiddenImg.width();
hiddenImg.remove();
});
您的示例不起作用:
BFX View -> 0 images found in ...
无论如何,您正在尝试在加载图像之前读取宽度。看看这个问题的答案,它实际上涵盖了相同的主题:
使用 JavaScript 获取图像的真实宽度和高度?(在 Safari/Chrome 中)
对于大型图像,我建议使用读取图像尺寸的服务器端脚本,这样客户端就不必等待加载所有图像来触发脚本。
您需要为所有图像添加一个事件侦听器,并在加载它们>>后获取它们的边界。
img.onload = function () {
// get width and height of the img refering to it using "this" keyword
}
如果您使用的是 JQuery
$(imgSelector).load(function(){
// get width and height of the img refering to it using "$(this)"
}):
相关文章:
- 如何动态检测Mozilla/Chrome上是否启用SSO
- 检测 Chrome 浏览器窗口的宽度和高度,以防止元素溢出
- 检测 Chrome NaCl 是否可用
- 如何检测 Chrome 默认搜索引擎
- 在 Javascript 中检测 Chrome 和 Safari
- 检测 Chrome 浏览器安装版本是否为 64 位
- 检测 Chrome 扩展程序中网络请求的来源
- 在带有触摸屏的 Windows 8 上检测 Chrome 中的触摸事件
- 检测 chrome.extension.sendRequest 的失败
- 仅在手机上检测Chrome
- 检测Chrome扩展内容脚本是否已注入/内容脚本是否包含保护
- 如何检测chrome浏览器
- 触摸屏检测:Chrome 17
- 如何检测chrome摄像头访问对话框打开
- 检测Chrome中的异步脚本加载
- 检测Chrome for iOS地址栏何时显示
- 如何检测Chrome检查元素是否运行
- 检测Chrome插件警告
- 检测Chrome浏览器中使用的高对比度扩展
- 如何检测Chrome(和其他浏览器)中是否启用了本机FlashBlock