对于 IE 中的 ajax 内容,加载触发时间太早
onload triggering too early for ajax content in IE
我有一个页面,其中图像是动态提供的,并使用javascript进行缩放以适应适当的尺寸。这最初是使用 img 标签中的 onload 属性完成的,但后来我注意到在 IE 中,在某些情况下为图像返回的高度远低于实际高度,这最终扭曲了图像。我通过在 $(window).load() 完成后查找和调整所有图像的大小来解决这个问题,这对于初始页面加载工作正常,但我也设置了页面以使用 ajax 调用添加更多内容。对于ajax内容,我尝试了一些我在这里找到的代码来改善问题,但没有完全解决它。这是我的一个图像标签示例
<img id="img<?php echo $prodModObj->rolloverID; ?>" class="mbImg unsized" src="<?php echo $prodModObj->img; ?>" alt="<?php echo $prodModObj->name; ?>" onerror="swapImage(<?php echo $prodModObj->rolloverID; ?>)" />
如果加载时出现错误,swapImage 函数只会用占位符交换图像。这是我的 JS
function swapImage(thisImgID) {
var imgID = 'img#img' + thisImgID;
$(imgID).attr('src', '/images/NoImageAvail.jpg');
}
function checkImage(thisImgID, fitDimension, spaceDimension) {
var imgID = 'img#img' + thisImgID;
var imgHeight = $(imgID).height();
var imgWidth = $(imgID).width();
var displayHeight, displayWidth, newMargin;
if (imgHeight > imgWidth) {
displayHeight = fitDimension;
displayWidth = imgWidth*(displayHeight/imgHeight);
} else if (imgHeight < imgWidth) {
displayWidth = fitDimension;
displayHeight = imgHeight*(displayWidth/imgWidth);
} else {
displayWidth = fitDimension;
displayHeight = fitDimension;
}
$(imgID).css('height', displayHeight);
$(imgID).css('width', displayWidth);
newMargin = ((spaceDimension - displayHeight)/2);
$(imgID).css('margin-top', newMargin);
$(imgID).removeClass('mbImg unsized').addClass('mbImg sized');
}
然后在我有的页面上
$(window).load(function(){
// Resize product images
$('.mbImg.unsized').each( function() {
var rolloverID = $(this).attr('id').substr(3);
checkImage(rolloverID,250,270);
});
});
然后在 ajax 调用的成功部分,我有
$('.mbImg.unsized').each( function() {
var rolloverID = $(this).attr('id').substr(3);
if (this.complete) {
checkImage(rolloverID,250,270);
} else {
$(this).on('load', function(){
checkImage(rolloverID,250,270);
});
}
});
浏览器缓存的图像工作正常,初始页面加载中的图像工作正常,但大约五分之一的新 ajax 图像失真。有没有另一种方法可以用来在IE中正确调整所有ajax图像的大小?
感谢您的帮助,
也许换
一种方式来?
我试图摆脱html4样式标签语法,使用简单的html5标签以及JavaScript和CSS的组合来控制"视图"。
看看这个小提琴:http://jsfiddle.net/zacwolf/s1haq3mz/
一个问题是您希望图像如何流动,因为使用这种方法,所有图像在技术上都是相同的大小(如边框所示)。 另请注意,第二个图像的 .src 对 url 进行了一些调整,以便它是图像文件的 404,从而触发了一个错误图像。
<img id="one" class="myclass" />
<img id="two" class="myclass" />
<style>
.myclass{
height:270px;
width:250px;
background-position:center,center;
background-repeat:no-repeat;
background-size:contain;
}
</style>
<script>
var one = new Image();
one.onerror=
function(){
this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png'
}
one.onload=
function(){
$('#one').css('background-image','url('+one.src+')')
}
one.src='https://cjjulian.files.wordpress.com/2009/04/blah_blah_blah-703369.jpg';
var two = new Image();
two.onerror=
function(){
this.src='http://leomarketingep.com/wp-content/uploads/Sign-Error-icon.png';
}
two.onload=
function(){
$('#two').css('background-image','url('+two.src+')')
}
two.src='https://cjjulian.files.wordpress.com/2019/04/blah_blah_blah-703369.jpg';
</script>
如果你有很多图像,你可以填充一个图像对象数组,以便更好地引用等。
相关文章:
- 加载侦听器上的函数触发得太早
- 生成随机唯一数据的时间太长,占用了100%的CPU
- Android原生浏览器中的dom处理时间太长
- JQuery:更新表内容花费的时间太长
- AngularJS popover未显示内容:渲染太早
- 函数启动太早
- 咽表结束得太早了
- Node js async.series无法使用Express应用程序--响应发生得太早
- Drupal 视图加载时间太长
- $.当承诺解决得太早时
- 过渡开始得太早,而 css 样式尚未完全应用
- 对于 IE 中的 ajax 内容,加载触发时间太早
- prop() 花费的时间太长
- JavaScript 脚本执行时间太长.获取脚本需要太长时间提示
- Moment.js fromNow() 太早了几秒钟
- Js 数组长度增加得太早
- JavaScript 在命令运行太早时打开新窗口而不是选项卡
- Meteor FlowRouter触发器输入触发太早
- Javascript函数调用得太早
- 太早从数组中删除元素