Bootstrap + Flexslider:在隐藏元素中加载 Flexslider 会导致 jQuery 无响应 [英] Bootstrap + Flexslider: Loading Flexslider within hidden element causes jQuery to be unresponsive

问题描述

我有一个登录页面，当宽度超过 767 像素时加载得很好，并且浏览器在低于该宽度时崩溃.它只会在加载低于该宽度时崩溃，我可以以桌面宽度加载然后缩小尺寸就好了.

I have a login page which loads just fine when above 767px wide and crashes the browser below that width. It only crashes when loading below that width, I can load at desktop width then size down just fine.

我有一个带有 .visible-desktop 的 div，其中包含桌面登录和多余的东西，另一个带有 .hidden-desktop 仅包含移动登录.多余内容中的图像当前是 404'ing.我会修复它，但它肯定不会导致浏览器崩溃.

I have one div with .visible-desktop that contains the desktop login and superfluous stuff and another with .hidden-desktop containing only the mobile login. An image in the superfluous stuff is currently 404'ing. I'll fix it but it sure shouldn't be crashing the browser.

在服务器控制台中，加载 404 资产之前的资产，没有其他任何事情发生.在浏览器中，页面变得无响应并崩溃.Chrome 刚刚崩溃，FF 说

In the server console, the asset previous to the 404 asset loads and nothing else happens. In the browser, the page becomes unresponsive and crashes. Chrome just crashs and FF says

A script on this page may be busy, or it may have stopped responding. You can stop the script now, or you can continue to see if the script will complete.

Script: http://ccdev:3333/assets/jquery.js?body=1:6265

更新:使用 firebug 并在 jquery v1.8.2 的第 6348 行插入断点并逐步执行它似乎卡住了增加称为 elems 的东西.在一个步骤中，该值将类似于 "

177085</a></li>"，在下一步它将是 "

;<a>177086</a></li>" 并且它永远不会离开该行.有问题的行是

Update: Using firebug and inserting a breakpoint on line 6348 in jquery v1.8.2 and stepping through it seems it's stuck incrementing something called elems. On one step the value will be something like "<li><a>177085</a></li>", on the next it will be "<li><a>177086</a></li>" and it never leaves that line. The line in question is

div.parentNode.removeChild( div );

推荐答案

结果证明这是 Woothemes flexslider 的问题.jQuery 无法删除由引导程序隐藏的项目.如果以隐藏 flexslider 的宽度加载页面，jquery 会无限循环，导致浏览器挂起和崩溃.

This turned out to be an issue with Woothemes flexslider. jQuery can not remove items hidden by bootstrap. If loading the page at a width where flexslider is hidden, jquery has an infinite loop which will cause the browser to hang and crash.

我在此处找到了修复程序.只需使用 minItems: 1 初始化 flexslider.这应该是默认值！

I found the fix here. Just initialize flexslider with minItems: 1. Which should really be the default!

这篇关于Bootstrap + Flexslider:在隐藏元素中加载 Flexslider 会导致 jQuery 无响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！