开发者社区 问答 正文

如何让appendTo()追加的元素先不要显示,或者存入缓冲区或者暂时不要样式

var boxadd=$("<div>").addClass("box").appendTo($("#container"));
var current=$("<div>").addClass("pic").appendTo(boxadd);
$("<img>").attr("src","./img/"+dataPic[currentIndex()]).appendTo(current);

动态加载,但是由于会先加载div,而div是有css样式的,所以就会出现先出现一个有样式的没图的div然后再出图片,结果就是加载后先闪一下出现一系列没有图片加载但有样式的空div,然后再闪出图片,这样看上去很糟糕...

请问有什么解决方法么?

展开
收起
小旋风柴进 2016-03-26 10:25:38 2593 分享 版权
1 条回答
写回答
取消 提交回答
  • 先加载完图片再append到container:

    var boxadd=$("<div>").addClass("box").appendTo($("#container"));
    var img = new Image();
    img.src = "./img/"+dataPic[currentIndex()];
    $(img).on('load', function() {
      // 图片加载完成
      var current=$("<div>").addClass("pic");
      $(img).appendTo(current);
      current.appendTo(boxadd);
    });

    如果是多张图片的话, 得回调里做一个计数。

    2019-07-17 19:15:36
    赞同 展开评论
问答分类:
问答地址: