纯JS实现的批量图片预览加载功能

1.实现原理直接见代码,需要一张转圈的小图片,需要预览的所有图片默认的位置全是这张小图片,滚轮滚到原图需要出现的位置时候,预览加载替换小图片.实现效果

1. <div style="height: 2500px;" id="txtScrollTop">
   
2. </div>
   
3. <div id="galleryList">
   
4. </div>

复制代码

1. var util = {
   
2. $: function (id) {
   
3. return document.getElementById(id);
   
4. },
   
5. getElementsByClassName: function (oElm, strTagName, strClassName) {
   
6. var arrElements = oElm.getElementsByTagName(strTagName);
   
7. var arrReturnElements = new Array();
   
8. strClassName = strClassName.replace(/-/g, "\-");
   
9. var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
   
10. var oElement;
    
11. for (var i = 0; i < arrElements.length; i++) {
    
12. oElement = arrElements[i];
    
13. if (oRegExp.test(oElement.className)) {
    
14. arrReturnElements.push(oElement);
    
15. }
    
16. }
    
17. return arrReturnElements;
    
18. },
    
19. getXY: function (obj) {
    
20. var sumTop = 0, sumLeft = 0;
    
21. while (obj != document.body) {
    
22. sumLeft += obj.offsetLeft;
    
23. sumTop += obj.offsetTop;
    
24. obj = obj.offsetParent;
    
25. }
    
26. return { x: sumLeft, y: sumTop }
    
27. }
    
28. };
    
29. 
    
30. var GalleryViewer = {
    
31. GalleryContainer: {},
    
32. smallImgs: [], //小图片数组
    
33. orginalImgs: [], //原始图片数组
    
34. init: function (id, imgs, classname, smallImgSrc) {
    
35. this.GalleryContainer = util.$(id);
    
36. this.orginalImgs = imgs;
    
37. for (var i = 0; i < imgs.length; i++) { //追加所有预览小图片
    
38. var img = document.createElement("img");
    
39. img.src = smallImgSrc;
    
40. img.className = classname;
    
41. this.GalleryContainer.appendChild(img);
    
42. }
    
43. this.smallImgs = util.getElementsByClassName(util.$(id), "img", classname);
    
44. if (util.getXY(GalleryViewer.GalleryContainer).y < window.screen.height) {//如果初始在页面开始部位直接预览加载
    
45. this.preloadImages();
    
46. }
    
47. var mousewheelevt = (/Firefox/i.test(navigator.userAgent)) ? "DOMMouseScroll" : "mousewheel" //FF doesn't recognize mousewheel as of FF3.x
    
48. if (document.attachEvent) //if IE (and Opera depending on user setting)
    
49. document.attachEvent("on" + mousewheelevt, GalleryViewer.orginalImgsAppear);
    
50. else if (document.addEventListener) //WC3 browsers
    
51. document.addEventListener(mousewheelevt, GalleryViewer.orginalImgsAppear, false);
    
52. },
    
53. preloadImages: function () {
    
54. for (var i = 0; i < GalleryViewer.orginalImgs.length; i++) {
    
55. (function (i) {
    
56. var imagePreload = new Image();
    
57. imagePreload.src = GalleryViewer.orginalImgs[i]; //预加载大图片
    
58. if (imagePreload.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数
    
59. GalleryViewer.ImgsChange(i, imagePreload);
    
60. return; // 直接返回，不用再处理onload事件
    
61. }
    
62. imagePreload.onload = GalleryViewer.ImgsChange(i, imagePreload); //加载完成替换
    
63. })(i);
    
64. }
    
65. },
    
66. ImgsChange: function (i, obj) {
    
67. this.smallImgs[i].src = obj.src;
    
68. },
    
69. orginalImgsAppear: function () {
    
70. //alert(getXY(this.GalleryContainer).y - window.screen.height);
    
71. if (document.documentElement.scrollTop > util.getXY(GalleryViewer.GalleryContainer).y - window.screen.height) {
    
72. GalleryViewer.preloadImages();
    
73. }
    
74. 
    
75. }
    
76. };
    
77. (function () {
    
78. 
    
79. var imgs1 = ['../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png', '../Content/images/gb_tip_layer.png'];
    
80. GalleryViewer.init("Div1", imgs1, "smallImgs1", "../Content/images/preload.gif");
    
81. //参数函数分别为div.id容器,原图地址数组,小图的类名,小图地址,具体图片地址请参照自己的项目
    
82. })();

复制代码