Jquery - MapTiles加载非常慢，懒惰的负载 [英] Jquery - MapTiles loading very slow with lazy load
问题描述
我的下一个问题。我做了一个地图，显示了一些点。
我认为将地图拆分成200x200px的瓷砖以便轻松加载是一个好主意。
但是，随着每个缩放级别，地图拖动变慢。我想我在我的算法中犯了一个合理的错误。
算法是：
function LazyLoad（img）{
// Viewport data
var top = m.viewingBox.offset（）。
var left = m.viewingBox.offset（）。left;
var right = m.viewingBox.offset（）。left + m.viewingBox.width（）;
var bot = m.viewingBox.offset（）。top + m.viewingBox.height（）;
//图像数据
var imgT = img.offset（）。
var imgL = img.offset（）。left;
var imgR = img.offset（）。left + img.width（）;
var imgB = img.offset（）。top + img.height（）;
//检查图像是否在视口中
返回（imgB> top&& imgR> left&& && imgL< right&&& imgT< bot ）
}
函数LoadImage（）{
//检查每个图块
$（。emptyTile）。each（function（）{
// if TRUE，load image
if（LazyLoad（$（this）））{
$（this）.attr（src，$（this）.attr（data -src））;
$（this）.attr（class，fullTile）;
}
}）;
}
任何人都知道我的错误在哪里，哪个点是坏人，放慢速度所有的东西？
感谢阅读。如果有什么不清楚，只要问一下。
编辑：这个函数调用LoadImage。所以每次用户拖动地图时，都会调用LoadImage。
function MoveMap（x，y）{
var newX = x;
var newY = y;
if（m.locked）{
var rightEdge = -m.map.width（）+ m.viewingBox.width（）;
var topEdge = -m.map.height（）+ m.viewingBox.height（）;
newX = newX< rightEdge？ rightEdge：newX;
newY = newY< topEdge？ topEdge：newY;
newX = newX> 0？ 0：newX;
newY = newY> 0？ 0：newY;
}
//保存缩放点
var testx = m.zoom.x + newX;
var testy = m.zoom.y + newY;
m.zoom.x = m.zoom.x - testx;
m.zoom.y = m.zoom.y - testy;
m.map.css（{left：newX，top：newY}）;
LoadImage（）;
};
再次尝试使用另一个解决方案，但问题仍然保持不变。我添加了代码，也许有些（希望永远不会死）有这样一个应用程序的经验，知道瓶颈。
数字是否太高？缩放级别2有约7xx图像，三级13xx图像。
function LoadImage（）{
var images = $（。emptyTile）;
//console.log(images）;
// Viewport数据
var inview = images.filter（function（）{
var top = m.viewingBox.offset（）。top -200;
var left = m.viewingBox.offset（）。left -200;
var right = m.viewingBox.offset（）。left + m.viewingBox.width（）+200;
var bot = m .viewingBox.offset（）。top + m.viewingBox.height（）+200;
//图像数据
var imgT = $（this）.offset（）。top;
var imgL = $（this）.offset（）。left;
var imgR = $（this）.offset（）。left + $（this）.width（）;
var imgB = $（this）.offset（）。top + $（this）.height（）;
//检查视口边框
return（imgB> top&& > left&& imgL&Right&& imgT< bot）
}）;
images.one（loadIt，function（）{
source = $（this）.attr（data-src）;
if来源）{
$（this）.attr（src，source）;
$（this）.attr（class，fullTile）;
}
}）;
loaded = inview.trigger（loadIt）;
images = images.not（loaded）;
}
解决问题。这只是我可怕的代码。
我分离了大量的offset（），width（）ad height（）函数，使它有点薄，它的工作原理现在好多了。感谢阅读，永远不要忘记，不要把很多功能放在你的循环中;）
And my next problem. I made a little Map, showing some points. I thought it is a good idea to split the map into 200x200px tiles for easy loading.
But with every zoom level the map dragging becomes slower. I guess I made a logical mistake in my algorithm.
The algorithms are:
function LazyLoad(img) {
//Viewport data
var top = m.viewingBox.offset().top;
var left = m.viewingBox.offset().left;
var right = m.viewingBox.offset().left + m.viewingBox.width();
var bot = m.viewingBox.offset().top + m.viewingBox.height();
//Image data
var imgT = img.offset().top;
var imgL = img.offset().left;
var imgR = img.offset().left + img.width();
var imgB = img.offset().top + img.height();
//check if image is in viewport
return (imgB > top && imgR > left && imgL < right && imgT < bot)
}
function LoadImage() {
//Check every tile
$(".emptyTile").each(function() {
//if TRUE, load image
if(LazyLoad($(this))) {
$(this).attr("src", $(this).attr("data-src"));
$(this).attr("class", "fullTile");
}
});
}
Anyone an idea where is my mistake or which point is the bad guy, slowing everything out?
Thanks for reading. If anything is unclear, just ask.
Edit: This function calls LoadImage. So every time the user drags the map, LoadImage is called.
function MoveMap(x, y) {
var newX = x;
var newY = y;
if(m.locked) {
var rightEdge = -m.map.width() + m.viewingBox.width();
var topEdge = -m.map.height() + m.viewingBox.height();
newX = newX < rightEdge? rightEdge : newX;
newY = newY < topEdge ? topEdge : newY;
newX = newX > 0 ? 0 : newX;
newY = newY > 0 ? 0 : newY;
}
// holding the zoom point
var testx = m.zoom.x + newX;
var testy = m.zoom.y + newY;
m.zoom.x= m.zoom.x - testx;
m.zoom.y= m.zoom.y - testy;
m.map.css({"left" : newX, "top" : newY});
LoadImage();
};
Tried it again with another "solution" but the problem remains the same. I add the code, maybe some (hope never dies) has experience with such a app and knows the bottle neck. Is the number just too high? Zoom level 2 has about 7xx images, level three 13xx images.
function LoadImage() {
var images = $(".emptyTile");
//console.log(images);
//Viewport data
var inview = images.filter(function() {
var top = m.viewingBox.offset().top -200;
var left = m.viewingBox.offset().left -200;
var right = m.viewingBox.offset().left + m.viewingBox.width() +200;
var bot = m.viewingBox.offset().top + m.viewingBox.height() +200;
//Image data
var imgT = $(this).offset().top;
var imgL = $(this).offset().left;
var imgR = $(this).offset().left + $(this).width();
var imgB = $(this).offset().top + $(this).height();
//check borders of viewport
return (imgB > top && imgR > left && imgL < right && imgT < bot)
});
images.one("loadIt", function() {
source = $(this).attr("data-src");
if (source) {
$(this).attr("src", source);
$(this).attr("class", "fullTile");
}
});
loaded = inview.trigger("loadIt");
images = images.not(loaded);
}
Solved the problem. It was just my awful code.
I separated the huge amount of offset(), width() ad height() functions, made it little bit thinner and it works way better now.
Thanks for reading and never forget, don't put to much functions into your loop ;)
这篇关于Jquery - MapTiles加载非常慢，懒惰的负载的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
