加载时图像为黑色涉及杰克·摩尔的图像缩放插件

问题描述

我有一个动态添加的图像，但是在加载时它是黑色的（我知道它已经加载了，因为我尝试放置加载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 (将#修改为@）

html javascript jquery jquery-plugins