如何解决加载时图像为黑色涉及杰克·摩尔的图像缩放插件
我有一个动态添加的图像,但是在加载时它是黑色的(我知道它已经加载了,因为我尝试放置加载gif并将其设置为在加载图像时将其删除,而gif没有显示)。我退出创建的窗口(只是一个大div块),然后再次进入,图像将正常显示。
我基本上创建了一个名为appendImg()的函数来动态添加图像,如下所示,这些图像全部使用我安装的Jack Moore的jquery zoom插件。该插件基本上使我可以在单击图像时放大图像,因此它需要我为该插件创建一个ID,然后将图像附加到ID中。
如何在不关闭div的情况下正常显示图像?目前,我仍在台式机上进行编码,但是稍后我将使用Github来发布网站,这会使图像加载速度更快吗?谢谢。
我尝试不使用像这样的插件来正常添加图像,并且它立即显示出来,所以这一定是因为插件不能使图像立即显示出来
function appendNormalImg(imgName){
var image = document.createElement("img");
image.src = imgName;
image.alt = "image";
image.setAttribute("class","normalImage");
$(".infoContent").append(image);
}
function appendImg(imgName){
zoomNum+=1; //variable is initialized at top of the javascript file
var zoomNumString = zoomNum.toString(); //create id name for new zoom class
var zoomID = "zoomId" + zoomNumString;
var newZoomClass = document.createElement("div"); //create new zoom class for each image
newZoomClass.setAttribute("class","zoom");
newZoomClass.setAttribute("id",zoomID); //new ID for zoom container (since I may use this function multiple times to add multiple images)
$(".infoContent").append(newZoomClass);
var image = document.createElement("img"); //create img element
image.src = imgName;
image.alt = "image";
var imgID = "imgID" + zoomNumString;
image.setAttribute("id",imgID); //new ID for image to get width below (again,because I want multiple images)
zoomID = "#"+zoomID;
imgID = "#"+imgID;
$(zoomID).append(image); //appendchild image to specific zoom ID
var imgHeight = $(imgID).height();
$(zoomID).height(imgHeight);
var imgWidth = $(imgID).width();
$(zoomID).width(imgWidth);
$(document).ready(function(){ //jquery plugin zoom function for zooming in on picture
$(zoomID).zoom({on:'click',magnify:1,url:false,touch:true});
});
$(imgID).ready(function(){
$("#loader").remove();
});
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。