如何在 AJAX 成功函数中调用 element.onload？

Posted 2023-03-22

【中文标题】如何在 AJAX 成功函数中调用 element.onload？

【英文标题】：How to call element.onload inside AJAX sucess function?

【发布时间】：2017-08-25 15:07:04

【问题描述】：

我在 php codeignitor 中使用 AJAX 上传图片，上传时返回包含上传图片路径的 JSON 响应，然后我将该路径插入到 img 标签中以供预览

现在我想做的是在更新其路径后获取渲染的 img 标签的高度和宽度，但问题是我总是得到一个 0 所以请有人在这里帮助我

这是我的 JS

函数上传广告（） // console.log($('#uploadedPDF').prop('files')); var file_data = $('#uploadedAdFile').prop('files')[0]; var form_data = new FormData(); form_data.append('uploadedAdFile', file_data); // 警报（form_data）； $.ajax( url: BASE_URL+'home/uploadAdFile', // 指向服务器端 PHP 脚本 dataType: 'json', // 期望从 PHP 脚本返回什么，如果有的话 缓存：假， 内容类型：假， 处理数据：假， 数据：form_data， 类型：'发布'， 异步：假， 成功：函数（数据） 控制台.log（数据）； 如果（数据.status == -1） // 如果文件扩展名验证失败 $('#uploadedAdFileMsg').html(data.msg); $('#uploadedAdFileMsg').removeClass('hidden'); $('#uploadedAdFilePreview').addClass('hidden'); 别的 // 如果文件扩展名验证通过 $('#uploadedAdFilePreview').attr('src', data.path); // 在 img 标签中渲染文件 $('#uploadedAdFileMsg').addClass('hidden'); $('#uploadedAdFilePreview').removeClass('hidden'); console.log(document.getElementById('uploadedAdFilePreview').naturalWidth); // 控制台.log() , 完成：函数（） console.log('完成'+document.getElementById('uploadedAdFilePreview').naturalWidth); ).done(函数() console.log('完成'+document.getElementById('uploadedAdFilePreview').naturalWidth); ); $(document).ajaxComplete(function() console.log('AJAX'+document.getElementById('uploadedAdFilePreview').naturalWidth); )

如您所见，我在不同的地方插入了获取身高代码，但没有运气

PS：我也使用了clientHeight、height、naturalHeight，但仍然是0

所以我得出的结论是在 img 标签呈现其内容之前调用了 height 函数，因此它显示为 0

那么我可以在 AJAX 成功函数中包含 onload 类型的函数吗？？

谢谢

【问题讨论】：

您是否尝试过将图像硬编码到包含您的广告的元素中。如果图像元素的高度仍然为 0，那么您可能需要修复一些 CSS，以便元素具有一定的高度来渲染图像。修复此问题后，您的 javascript 应该可以正常工作了。

这样可能更容易不使客户端逻辑膨胀，而只需在服务器端获取图像尺寸（getimagesize），然后在 JSON 结构中返回宽度和高度.. .?

@Tyler CSS 没有问题，我在 AJAX 请求后从浏览器开发者控制台获得了正确的高度和宽度。

@CBroe 但我想知道如何使用 Js 解决这个问题 :)

您不需要使用 document.getElement... - 您可以通过 $('#foo')[0] 简单地获取 DOM 元素

【参考方案1】：

我解决了：D，

实际上我在 Jquery 返回的对象上使用 onload 是错误的，它应该在 document.getElement 上使用，所以我放了一个

element.onload = function() getHeight();

在我的成功函数 os AJAX 中，它起作用了 :)