Question

我正在使用下面的js插件来进行文字滚动： https://github.com/aamirafridi/jQuery.Marquee

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

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

但我计划将图像放入滚动文本中。就像它在自述文件中提到的那样，我们需要将$（window）.load放在下面，以便它可以准确地计算图像宽度：

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

此功能将在网页加载后加载选取框。

但是，如果我在收到命令后只加载选框，该怎么办？例如：

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

我尝试将$（window）.load放入receivedCom函数中。它不会运行。知道怎么样？

Answer 1

我重复了一下这个例子。由于您将知道从服务器发送的图像数量，因此您可以将该号码作为num_images传递给客户端。客户端会将选取内容转储到带有div类的marquee中，然后检查预期的图像是否与选取框div内找到的数字相匹配。如果没有，加载仍然发生，我们每隔半秒检查一次。加载完成后，我们清除setInterval调用并告诉选取框开始。

正如我们在聊天中讨论的那样，setTimeout在启动选取框代码时很有效，因为它在单独的事件循环中执行代码，使插件有机会“看到”新加载的动态图像。如果以下情况不适合您，请尝试稍微增加setTimeout延迟。

我添加了working example 不使用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
});

客户端JS

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();
});

Answer 2

如果我正确理解了您的问题，请在收到命令后＃39;意味着你正在寻找一个活动。

根据您想要收听的事件类型，有很多技巧。

例如，您可能想要听一下鼠标点击：

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

JS在这里：http://jsfiddle.net/knr2qzxu/如果你想稍微玩一下：）

如果您希望更深入地了解这里发生的事情，我强烈建议您在此处详细了解jQuery事件：https://api.jquery.com/category/events/

编辑：

好的，我再次回答了你的问题，如果我没有正确理解，请纠正我：

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

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

然后你去：js检查你的窗口是否正确显示，然后触发选框。

如果窗口已加载，您也可以使用setInterval检查每n毫秒，然后触发选框，如果您需要执行此操作，请阅读文档：http://www.w3schools.com/jsref/met_win_setinterval.asp

请告诉我它是否有效！

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

2 个答案: