Tôi không có giải pháp chắc chắn sẽ ngăn các đường thẳng đứng xuất hiện.
Tuy nhiên, tôi có một số mẹo để cải thiện mã của bạn để tăng hiệu suất và bạn có thể có khả năng các dòng biến mất.
cache các yếu tố hình ảnh bên ngoài của chức năng di chuyển của bạn:
var image = $("#img_id")[0];
Trong code của bạn, không có lý do gì để truy vấn ID hình ảnh so với DOM mỗi 3 mili giây. Công cụ chọn của jQuery, Sizzle có rất nhiều công việc¹.
Không sử dụng jQuery CSS chức năng:
image.style.left = pos_new;
Thiết lập một đối tượng sở hữu là nhanh hơn so với một lời gọi hàm. Trong trường hợp của hàm jQuery css, có ít nhất hai lệnh gọi hàm (một đến css và một trong số bên trong css).
Sử dụng khoảng thời gian thay vì thời gian chờ:
setInterval(move, refresh);
tôi sẽ xem xét một khoảng thời gian cho một lần hình ảnh động Tôi muốn trở thành như suôn sẻ càng tốt
setTimeout or setInterval?
Một tùy chọn khác cho hoạt ảnh mượt mà hơn là sử dụng hiệu ứng chuyển tiếp hoặc hoạt ảnh CSS. Một giới thiệu tuyệt vời và so sánh có thể được tìm thấy trong CSS Animations and JavaScript bởi John Resig bảng
Trình duyệt hỗ trợ: http://caniuse.com/#search=transition
thư viện Một JavaScript mà tôi tìm thấy làm CSS animation qua JavaScript rất dễ dàng là morpheus.
¹ Dưới mui xe, đây là mã nó đi qua mỗi 3 mili giây để tìm hình ảnh của bạn:
Trong một trình duyệt hỗ trợ querySelectorAll:
Sizzle = function(query, context, extra, seed) {
context = context || document;
// Only use querySelectorAll on non-XML documents
// (ID selectors don't work in non-HTML documents)
if (!seed && !Sizzle.isXML(context)) {
// See if we find a selector to speed up
var match = /^(\w+$)|^\.([\w\-]+$)|^#([\w\-]+$)/.exec(query);
if (match && (context.nodeType === 1 || context.nodeType === 9)) {
// Speed-up: Sizzle("TAG")
if (match[1]) {
return makeArray(context.getElementsByTagName(query), extra);
// Speed-up: Sizzle(".CLASS")
} else if (match[2] && Expr.find.CLASS && context.getElementsByClassName) {
return makeArray(context.getElementsByClassName(match[2]), extra);
}
}
if (context.nodeType === 9) {
// Speed-up: Sizzle("body")
// The body element only exists once, optimize finding it
if (query === "body" && context.body) {
return makeArray([ context.body ], extra);
// Speed-up: Sizzle("#ID")
} else if (match && match[3]) {
var elem = context.getElementById(match[3]);
// Check parentNode to catch when Blackberry 4.6 returns
// nodes that are no longer in the document #6963
if (elem && elem.parentNode) {
// Handle the case where IE and Opera return items
// by name instead of ID
if (elem.id === match[3]) {
return makeArray([ elem ], extra);
}
} else {
return makeArray([], extra);
}
}
try {
return makeArray(context.querySelectorAll(query), extra);
} catch(qsaError) {}
// qSA works strangely on Element-rooted queries
// We can work around this by specifying an extra ID on the root
// and working up from there (Thanks to Andrew Dupont for the technique)
// IE 8 doesn't work on object elements
} else if (context.nodeType === 1 && context.nodeName.toLowerCase() !== "object") {
var oldContext = context,
old = context.getAttribute("id"),
nid = old || id,
hasParent = context.parentNode,
relativeHierarchySelector = /^\s*[+~]/.test(query);
if (!old) {
context.setAttribute("id", nid);
} else {
nid = nid.replace(/'/g, "\\$&");
}
if (relativeHierarchySelector && hasParent) {
context = context.parentNode;
}
try {
if (!relativeHierarchySelector || hasParent) {
return makeArray(context.querySelectorAll("[id='" + nid + "'] " + query), extra);
}
} catch(pseudoError) {
} finally {
if (!old) {
oldContext.removeAttribute("id");
}
}
}
}
return oldSizzle(query, context, extra, seed);
};
Và một trình duyệt điều đó không 't:
var Sizzle = function(selector, context, results, seed) {
results = results || [];
context = context || document;
var origContext = context;
if (context.nodeType !== 1 && context.nodeType !== 9) {
return [];
}
if (!selector || typeof selector !== "string") {
return results;
}
var m, set, checkSet, extra, ret, cur, pop, i,
prune = true,
contextXML = Sizzle.isXML(context),
parts = [],
soFar = selector;
// Reset the position of the chunker regexp (start from head)
do {
chunker.exec("");
m = chunker.exec(soFar);
if (m) {
soFar = m[3];
parts.push(m[1]);
if (m[2]) {
extra = m[3];
break;
}
}
} while (m);
if (parts.length > 1 && origPOS.exec(selector)) {
if (parts.length === 2 && Expr.relative[ parts[0] ]) {
set = posProcess(parts[0] + parts[1], context, seed);
} else {
set = Expr.relative[ parts[0] ] ?
[ context ] :
Sizzle(parts.shift(), context);
while (parts.length) {
selector = parts.shift();
if (Expr.relative[ selector ]) {
selector += parts.shift();
}
set = posProcess(selector, set, seed);
}
}
} else {
// Take a shortcut and set the context if the root selector is an ID
// (but not if it'll be faster if the inner selector is an ID)
if (!seed && parts.length > 1 && context.nodeType === 9 && !contextXML &&
Expr.match.ID.test(parts[0]) && !Expr.match.ID.test(parts[parts.length - 1])) {
ret = Sizzle.find(parts.shift(), context, contextXML);
context = ret.expr ?
Sizzle.filter(ret.expr, ret.set)[0] :
ret.set[0];
}
if (context) {
ret = seed ?
{ expr: parts.pop(), set: makeArray(seed) } :
Sizzle.find(parts.pop(), parts.length === 1 && (parts[0] === "~" || parts[0] === "+") && context.parentNode ? context.parentNode : context, contextXML);
set = ret.expr ?
Sizzle.filter(ret.expr, ret.set) :
ret.set;
if (parts.length > 0) {
checkSet = makeArray(set);
} else {
prune = false;
}
while (parts.length) {
cur = parts.pop();
pop = cur;
if (!Expr.relative[ cur ]) {
cur = "";
} else {
pop = parts.pop();
}
if (pop == null) {
pop = context;
}
Expr.relative[ cur ](checkSet, pop, contextXML);
}
} else {
checkSet = parts = [];
}
}
if (!checkSet) {
checkSet = set;
}
if (!checkSet) {
Sizzle.error(cur || selector);
}
if (toString.call(checkSet) === "[object Array]") {
if (!prune) {
results.push.apply(results, checkSet);
} else if (context && context.nodeType === 1) {
for (i = 0; checkSet[i] != null; i++) {
if (checkSet[i] && (checkSet[i] === true || checkSet[i].nodeType === 1 && Sizzle.contains(context, checkSet[i]))) {
results.push(set[i]);
}
}
} else {
for (i = 0; checkSet[i] != null; i++) {
if (checkSet[i] && checkSet[i].nodeType === 1) {
results.push(set[i]);
}
}
}
} else {
makeArray(checkSet, results);
}
if (extra) {
Sizzle(extra, origContext, results, seed);
Sizzle.uniqueSort(results);
}
return results;
};
Hãy thử sử dụng jQuery. Nó thường trơn tru hơn và dễ hơn rất nhiều so với những gì bạn đang làm bây giờ. – RobinJ
@RobinJ No. Đây không phải là một câu hỏi jQuery, câu trả lời là không sử dụng jQuery. Đây là một câu hỏi tuyệt vời bởi vì hiểu được quirks hoạt hình không được hiểu rõ. – Incognito
Tôi đang bắt đầu kết luận không có cách nào để lướt một hình ảnh như thế này ở 250pps mà không có một số vệt. Nhân tiện, nếu ai đó làm bất kỳ hoạt hình nào như thế này trong tương lai, tôi khuyên bạn nên sử dụng thư viện JS này: http://fx.inetcat.com/ nó không giải quyết được vấn đề trên nhưng nó vẫn cực kỳ hữu ích. –