Javascript 如何将图像放入我的滚动文本js

我正在使用下面的js插件进行文本滚动：

基本上，我们只需调用下面的文本滚动：

$('.marquee').marquee();

但我也计划把图像放到滚动文本中。就像在自述文件中提到的一样，我们需要将$（window）.load放在下面，这样它才能准确地计算图像宽度：

$(window).load(function() { $('.marquee').marquee(); });

此功能将在网页加载后加载字幕

但是如果我只是在收到命令后才加载字幕呢。例如：

receivedCom = function(){ $('.marquee').marquee({duration: 8000}); });

---

我已尝试将$（window）.load放入receivedCom函数。它跑不了。知道怎么做吗？

我对这个例子做了更多的修改。由于您知道从服务器发送的图像数量，因此可以将该数字作为

num\u images

传递给客户端。客户端将使用

marquee

类将字幕内容转储到

div

中，然后检查预期的图像是否与字幕

div

中的数字匹配。如果没有，加载仍在进行，我们每半秒钟检查一次。加载完成后，我们清除

setInterval

调用并告诉字幕开始

正如我们在聊天中所讨论的，

setTimeout

在启动字幕代码时是有效的，因为它在单独的事件循环中执行代码，使插件有机会“查看”新加载的动态图像。如果以下情况对您不起作用，请尝试稍微增加

setTimeout

延迟

我添加了一个不使用socket.io的。在此笔中，内容动态添加到字幕

div

，一次添加两个图像。直到看到其中的八个图像，字幕才会初始化。与下面的代码类似，调用

setInterval

检查预期的图像数量是否与DOM中的实际图像数量匹配

HTML

<div class='marquee'></div>

客户端JS

// Send the HTML along and the known number of images
// inside the string
socket.emit('your_event_name', { 
  marquee_content : 'html images and text go here',
  num_images      : 3
});

var socket          = io.connect('http://localhost')
    images_expected = 0, // 'num_images' from socket.emit data
    interval;

function startMarquee() {
  $('.marquee').marquee({duration: 8000});  
}

function checkImagesLoaded() {
  if ($('.marquee img').length === images_expected) {
    clearInterval(interval);
    setTimeout(startMarquee); // fire in new event loop    
  }
}

function insertMarqueeContent(content) {
  $(".marquee").html(content);
}

function initMarquee() {
  interval = window.setInterval(checkImagesLoaded, 500);  
}

socket.on('your_event_name', function (data) {
  images_expected = data.num_images;
  insertMarqueeContent(data.marquee_content);
  initMarquee();
});

---

如果我正确理解您的问题，“在我收到命令后”表示您正在查找事件

有很多技巧取决于你想听的事件类型

例如，您可能希望侦听鼠标单击：

$(document).ready(function(){
  $(window).click(function(event, target){
    $('.marquee').marquee();
  });
});

JSFIDLE here：如果您想玩一玩它：）

如果您想更深入地了解这里发生的事情，我强烈建议您阅读更多关于jQuery事件的内容：

编辑：

---

好的，我又看了一遍你的问题，如果我没有理解正确，请纠正我：

js代码中的某个地方有一个这样编写的函数：receivedCom=function（com）{}； 如果是，请在调用选框函数之前检查窗口是否已加载：

var receivedCom = function(com) {
  if (document.readyState === "complete") {        
    $('.marquee').marquee(); 
  }
};

接下来就是：js检查窗口是否正确显示，然后触发字幕

如果窗口已加载，您还可以使用setInterval每隔n毫秒检查一次，然后触发字幕，如果需要，请阅读文档：

---

请告诉我它是否有效

让我解释一下，js的作者提到，如果我把图片放到他的插件中，我会有宽度不准确的问题。他提到可以使用$（window.load）来解决这个问题。但是如果我将$（window）.load放入一个函数中，它将无法工作。@Coolguy我稍微修改了上面的代码，使其更符合您的要求。我没有使用按钮触发。实际上我正在使用socket.io。当我从服务器收到使用socket.io的命令时，我触发滚动图像运行。我已经修改了上面的代码（希望）使用socket.io。我不仅仅加载一个图像。我有多重图像。如何更改#myImage id？这不是鼠标单击事件。它正在接收一个命令事件。。。该命令可以来自tcp/ip或comport。你知道怎么做吗？好的，我又问了一遍你的问题，如果我没有正确理解，请纠正我：实际上我正在使用socket.io，当我从服务器收到命令时，我将加载滚动图像如果你使用socket io，当你收到消息时一定会发生一些事件。您需要检查document.readyState（请参阅编辑的代码段）。如果您只获得1个事件，您可能希望在触发选框之前使用setInterval定期检查readyState:）如果是，请不要忘记清除它！我试过你的方法，但我仍然有图像宽度不准确的问题。你知道怎么解决吗？