我正在使用Bootstrap模式表单构建一个网页。打开模态窗体时,它会显示一个用户可以选择的图像网格(使用Bootstrap 2.3.2媒体网格)。
我只使用有限数量的图片进行测试,但用户一次最多可以显示1024张图片。
在一组中显示大量图像显然不是一个好的体验,所以我添加了分页。
我的问题是我的获取和显示图像的策略是否理智。
所有图像的超链接都存储在mySQL数据库中。我检索单个查询中的所有超链接,在首次打开模式窗体时,在ajax请求后作为JSON数据返回到浏览器。
所有图片均为两种尺寸之一。在我的屏幕尺寸和分辨率下,每个页面显示大约32个。
每个页面的内容 - 或.media-grid内的所有内容 - 都是动态添加的。最初,只有第一页图像的元素被添加(在位于媒体网格内的容器div内),因为打开了模态对话框。
当用户点击另一个页码时,会添加该页面的元素。
然后将上一页的元素从模态对话框中分离(Jquery detach()),并存储在全局数组中(或者更确切地说,包含所有图像的div被分离,并且对它的引用存储在全局数组中)。
当用户返回先前访问过的页面时,将从全局数组中检索容器div,并将其附加到媒体网格。
我关注内存使用和绑定。
从内存的角度来看,在全局数组中存储大量包含图像元素的预先构建的div似乎是一个坏主意。因此,我计划将数量限制在6或8(我已经相当随意地达到了这个数字),清除了最旧的存储div以便为新的存储器让路。如果数组中没有div,但之前已经访问过,则必须重建它。
但是,我不知道将所有这些存储在工作记忆中是否合理。在访问每个页面时重新创建是否会更好?这似乎是很多对象的创建和破坏。
我有与媒体网格中的图像相关联的事件处理程序,以响应点击和鼠标悬停。当我清除一些图像元素(在容器div上使用JQuery empty())时,我没有做任何事情来明确地删除这些 - 这是否有影响,或者垃圾收集器会为我照看它?
如果有人能够理智地检查我的想法并建议我是否应该重新制定我的方法,我将不胜感激。感谢。