javascript - jquery用鼠标悬停显示/隐藏大图像
问题描述
我正在使用此 jquery 代码来隐藏/显示具有固定位置的图像:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$('.image-content').css("display", "flex");
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
只要图像被预加载,代码就可以很好地工作。当我在未完全加载的大图片上进行鼠标悬停时,图像不会出现,甚至在鼠标悬停区域停留更长时间也不会显示图像。我必须移出该区域并重新进入鼠标悬停区域才能显示它。
所以我用这段代码试了一下:
$(document).on('mouseover',".multiverseid", function (e) {
var mid = $(this).attr("id");
$('#picture').attr('src', mid);
$("#picture").load(function() {
$('.image-content').css("display", "flex");
});
});
$(document).on('mouseout',".multiverseid", function (e) {
$('#cardpicture').attr('src', "");
$('.image-content').css("display", "none");
});
但我没有成功。同样的问题。我做错了什么?
解决方案
您不需要为此删除该src
属性。只需用 隐藏元素就足够了display: none
。
将 设置src
为空字符串实际上会取消加载过程,并且浏览器可能会在其缓存中保持“故障”状态。
推荐阅读
- r - 如何将df中的因子列转换为每行的数字字符串?
- cassandra-3.0 - 如何在没有任何测试框架的情况下使用 Embedded-cassandra
- azure - 如何使用虚拟机 IP 地址查找关联的 Azure 帐户
- cmake - 现代 CMake 中是否有每个目标的 set() 方法?
- python - 合并和比较每个文档的文本
- python-3.x - 如何在python=3.6中安装torch==0.3.1
- node.js - 通过 VueJS 订阅 Redis 服务器
- rx-java2 - vert.x 的性能问题
- java - Redis 仍然返回 null 条目,即使它们已过期
- r - 在 R 中合并两个数据帧时遇到问题(VLOOKUP)