Jquery – 使用延迟加载加载非常慢的MapTiles

而我的下一个问题。 我做了一个小地图，显示了一些观点。 我认为将地图分成200x200px的瓷砖以便于加载是个好主意。

但是对于每个缩放级别，地图拖动变得更慢。 我想我在算法中犯了一个逻辑错误。

算法是：

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

任何人都知道我的错误在哪里或哪个点是坏人，减慢了一切？

谢谢阅读。 如果有什么不清楚，请问。

编辑：此函数调用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  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(); }; 

用另一个“解决方案”再次尝试，但问题仍然存在。 我添加了代码，也许一些（希望永远不会死）有这样的应用程序的经验，并知道瓶颈。 这个数字太高了吗？ 缩放级别2具有大约7xx图像，级别3 13xx图像。

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

Answer 1

解决了这个问题。 这只是我糟糕的代码。

我将大量的offset（），width（）ad height（）函数分开，使它稍微变薄，现在效果更好。

感谢阅读，永远不要忘记，不要把很多function放到你的循环中;）