Question

下面的代码可以正常使用'mousemove'，但我想在页面加载时显示图像，而我没有更改任何内容使图像显示在页面加载上。任何帮助是极大的赞赏！谢谢伊恩

$(document).ready(function () {

    $("body").mousemove(function () {

    $("li.fsn-level-1").each(function () {

      var imgCount = $(this).children("span").first().children("img").length;

      if (imgCount < 2) {
        $(this).children("span").first().prepend("<img id='imgPlus' src='images/plus.png' style='display:inline' />"); 
        $(this).children("span").first().prepend("<img id='imgMinus' src='images/minus.png' style='display:none' />");

      }

      var closed = $(this).hasClass("closed");
      var open = $(this).hasClass("open");
      var first = !closed && !open;
      if (first) {
        $(this).removeClass("open")
          $(this).removeClass("closed").addClass("closed");
        var sub = $(this).children("ul");
        if (sub.length) {
          sub.hide();
        }

        var plus = $(this).children("span").first().find("img[id='imgPlus']");
        if (plus.length)
          plus.show();

        var minus = $(this).children("span").first().find("img[id='imgMinus']");
        if (minus.length)
          minus.hide();
      }


      $(this).unbind('hover').bind('hover', function () {
        CloseAllSubMenu();
        var closed = $(this).hasClass("closed");
        var open = $(this).hasClass("open");
        var first = !closed && !open;


        if (first || closed) {
          $(this).removeClass("closed");
          $(this).removeClass("open").addClass("open");
          var sub = $(this).children("ul");
          if (sub.length) {
            sub.show();
          }

          var plus = $(this).children("span").first().find("img[id='imgPlus']");
          if (plus.length)
            plus.hide();

          var minus = $(this).children("span").first().find("img[id='imgMinus']");
          if (minus.length)
            minus.show();

        }
        if (open) {

          $(this).removeClass("open")
            $(this).removeClass("closed").addClass("closed");

          var plus = $(this).children("span").first().find("img[id='imgPlus']");
          if (plus.length)
            plus.show();

          var minus = $(this).children("span").first().find("img[id='imgMinus']");
          if (minus.length)
            minus.hide();
        }
      });
    });

Answer 1

很难看到你想要做的事情，但这就是我发现的：

您在此处准备好页面后附加图片：

$(this).children("span").first().prepend("<img id='imgPlus' src='images/plus.png' style='display:inline' />");
$(this).children("span").first().prepend("<img id='imgMinus' src='images/minus.png' style='display:none' />");

这将导致图像在该时间点加载，即：您正在等待页面准备好（加载），然后您要附加它们，并在页面加载后强制它们加载。

如果您需要动态（看起来像），请在调用$(document).ready();之前尝试运行它。这样，它们将被包含在文档的加载中（因此在此之后发生的任何事情。

Answer 2

只是问一个愚蠢的问题，如果你想在page_load上加载图像，那么为什么不把标签放在页面上开始，所以图像已经作为文档的一部分加载了。

如果您想在文档准备好后（页面加载后）加载图像，但不能在鼠标悬停时加载图像

$("body").mousemove(function () { }

...来自您的javascript的部分，其余部分会立即触发，因为它不再连接到mousemove功能。

如何让JQuery在页面加载时加载图像？

2 个答案: