用es6类封装的图片预加载技术!
1、HTML
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>图片预加载</title> </head> <body> <div style="display: none"> <img data-src="images/arown.png" /> <img data-src="images/ewm2.png" /> <img data-src="images/hard.png" /> <img data-src="images/hard2.png" /> <img data-src="images/hard3.png" /> <img data-src="images/horizontal.jpg" /> <img data-src="images/loading-bj.png" /> <img data-src="images/loading-p1.gif" /> <img data-src="images/loading_bj.jpg" /> <img data-src="images/shoushi-text.png" /> <img data-src="images/shoushi.png" /> <img data-src="images/suotou.png" /> <img data-src="images/suotou2.png" /> <img data-src="images/suozi.png" /> <img data-src="images/touming.png" /> <img data-src="images/ts11.png" /> <img data-src="images/ts22.png" /> <img data-src="images/units-icons.png" /> <img data-src="images/video-img.jpg" /> <img data-src="images/1 (1).jpg" /> <img data-src="images/1 (10).jpg" /> <img data-src="images/1 (100).jpg" /> <img data-src="images/1 (101).jpg" /> <img data-src="images/1 (102).jpg" /> <img data-src="images/1 (103).jpg" /> <img data-src="images/1 (104).jpg" /> <img data-src="images/1 (105).jpg" /> <img data-src="images/1 (106).jpg" /> <img data-src="images/1 (107).jpg" /> <img data-src="images/1 (108).jpg" /> <img data-src="images/1 (109).jpg" /> <img data-src="images/1 (11).jpg" /> <img data-src="images/1 (110).jpg" /> <img data-src="images/1 (111).jpg" /> <img data-src="images/1 (112).jpg" /> <img data-src="images/1 (113).jpg" /> <img data-src="images/1 (114).jpg" /> <img data-src="images/1 (115).jpg" /> <img data-src="images/1 (116).jpg" /> <img data-src="images/1 (117).jpg" /> <img data-src="images/1 (118).jpg" /> <img data-src="images/1 (119).jpg" /> <img data-src="images/1 (12).jpg" /> <img data-src="images/1 (120).jpg" /> <img data-src="images/1 (121).jpg" /> <img data-src="images/1 (122).jpg" /> <img data-src="images/1 (123).jpg" /> <img data-src="images/1 (124).jpg" /> <img data-src="images/1 (125).jpg" /> <img data-src="images/1 (126).jpg" /> <img data-src="images/1 (127).jpg" /> <img data-src="images/1 (128).jpg" /> <img data-src="images/1 (129).jpg" /> <img data-src="images/1 (13).jpg" /> <img data-src="images/1 (130).jpg" /> <img data-src="images/1 (131).jpg" /> <img data-src="images/1 (132).jpg" /> <img data-src="images/1 (133).jpg" /> <img data-src="images/1 (134).jpg" /> <img data-src="images/1 (135).jpg" /> <img data-src="images/1 (136).jpg" /> <img data-src="images/1 (137).jpg" /> <img data-src="images/1 (138).jpg" /> <img data-src="images/1 (139).jpg" /> <img data-src="images/1 (14).jpg" /> <img data-src="images/1 (140).jpg" /> <img data-src="images/1 (141).jpg" /> <img data-src="images/1 (142).jpg" /> <img data-src="images/1 (143).jpg" /> <img data-src="images/1 (144).jpg" /> <img data-src="images/1 (145).jpg" /> <img data-src="images/1 (146).jpg" /> <img data-src="images/1 (147).jpg" /> <img data-src="images/1 (148).jpg" /> <img data-src="images/1 (15).jpg" /> <img data-src="images/1 (16).jpg" /> <img data-src="images/1 (17).jpg" /> <img data-src="images/1 (18).jpg" /> <img data-src="images/1 (19).jpg" /> <img data-src="images/1 (2).jpg" /> <img data-src="images/1 (20).jpg" /> <img data-src="images/1 (21).jpg" /> <img data-src="images/1 (22).jpg" /> <img data-src="images/1 (23).jpg" /> <img data-src="images/1 (24).jpg" /> <img data-src="images/1 (25).jpg" /> <img data-src="images/1 (26).jpg" /> <img data-src="images/1 (27).jpg" /> <img data-src="images/1 (28).jpg" /> <img data-src="images/1 (29).jpg" /> <img data-src="images/1 (3).jpg" /> <img data-src="images/1 (30).jpg" /> <img data-src="images/1 (31).jpg" /> <img data-src="images/1 (32).jpg" /> <img data-src="images/1 (33).jpg" /> <img data-src="images/1 (34).jpg" /> <img data-src="images/1 (35).jpg" /> <img data-src="images/1 (36).jpg" /> <img data-src="images/1 (37).jpg" /> <img data-src="images/1 (38).jpg" /> <img data-src="images/1 (39).jpg" /> <img data-src="images/1 (4).jpg" /> <img data-src="images/1 (40).jpg" /> <img data-src="images/1 (41).jpg" /> <img data-src="images/1 (42).jpg" /> <img data-src="images/1 (43).jpg" /> <img data-src="images/1 (44).jpg" /> <img data-src="images/1 (45).jpg" /> <img data-src="images/1 (46).jpg" /> <img data-src="images/1 (47).jpg" /> <img data-src="images/1 (48).jpg" /> <img data-src="images/1 (49).jpg" /> <img data-src="images/1 (5).jpg" /> <img data-src="images/1 (50).jpg" /> <img data-src="images/1 (51).jpg" /> <img data-src="images/1 (52).jpg" /> <img data-src="images/1 (53).jpg" /> <img data-src="images/1 (54).jpg" /> <img data-src="images/1 (55).jpg" /> <img data-src="images/1 (56).jpg" /> <img data-src="images/1 (57).jpg" /> <img data-src="images/1 (58).jpg" /> <img data-src="images/1 (59).jpg" /> <img data-src="images/1 (6).jpg" /> <img data-src="images/1 (60).jpg" /> <img data-src="images/1 (61).jpg" /> <img data-src="images/1 (62).jpg" /> <img data-src="images/1 (63).jpg" /> <img data-src="images/1 (64).jpg" /> <img data-src="images/1 (65).jpg" /> <img data-src="images/1 (66).jpg" /> <img data-src="images/1 (67).jpg" /> <img data-src="images/1 (68).jpg" /> <img data-src="images/1 (69).jpg" /> <img data-src="images/1 (7).jpg" /> <img data-src="images/1 (70).jpg" /> <img data-src="images/1 (71).jpg" /> <img data-src="images/1 (72).jpg" /> <img data-src="images/1 (73).jpg" /> <img data-src="images/1 (74).jpg" /> <img data-src="images/1 (75).jpg" /> <img data-src="images/1 (76).jpg" /> <img data-src="images/1 (77).jpg" /> <img data-src="images/1 (78).jpg" /> <img data-src="images/1 (79).jpg" /> <img data-src="images/1 (8).jpg" /> <img data-src="images/1 (80).jpg" /> <img data-src="images/1 (81).jpg" /> <img data-src="images/1 (82).jpg" /> <img data-src="images/1 (83).jpg" /> <img data-src="images/1 (84).jpg" /> <img data-src="images/1 (85).jpg" /> <img data-src="images/1 (86).jpg" /> <img data-src="images/1 (87).jpg" /> <img data-src="images/1 (88).jpg" /> <img data-src="images/1 (89).jpg" /> <img data-src="images/1 (9).jpg" /> <img data-src="images/1 (90).jpg" /> <img data-src="images/1 (91).jpg" /> <img data-src="images/1 (92).jpg" /> <img data-src="images/1 (93).jpg" /> <img data-src="images/1 (94).jpg" /> <img data-src="images/1 (95).jpg" /> <img data-src="images/1 (96).jpg" /> <img data-src="images/1 (97).jpg" /> <img data-src="images/1 (98).jpg" /> <img data-src="images/1 (99).jpg" /> </div> <div class="loadingpics"> <img id="loadingpics" src="images/loading-p1.gif" /> </div> <div class="loadingpics2"> <p class="perc_txt" style="color: #000">0%</p> </div> </body> <script src="js/jquery-2.2.3.min.js"></script> <script src="js/newpreLoad.js"></script> <script> var imgList = []; $('img[data-src]').each(function () { var src = $(this).data("src"); imgList.push(src); }) var loadImg = new PreloadImg(imgList); loadImg.loadImg(); </script> </html>
2、js
/** * 自定义预加载图片的类 * param imgList传入的待加载图片数组 * param imgLoadAll待加载总数量 * param count已加载数量 */ //判断是否微信登陆 var ua = window.navigator.userAgent.toLowerCase(); function isWeiXin() { if (ua.match(/MicroMessenger/i) == 'micromessenger') { return true; } else { return false; } } class PreloadImg { constructor(imgList) { this.imgList = imgList; this.imgLoadAll = this.imgList.length; this.count = 0; this.per = 0; } // 遍历待加载的图片 loadImg() { var that = this; that.imgList.forEach(function (src, i) { var newsrc = src.substring(src.length - 3); if (newsrc === 'mp3') { var audio = new Audio(src); var loadType = false; if (isWeiXin()) { document.addEventListener("WeixinJSBridgeReady", function () { audio.load(); audio.addEventListener('canplaythrough', function () { if (!loadType) { loadType = true; that.callback(); } }, false); }, false); } else { audio.load(); audio.addEventListener('canplaythrough', function () { if (!loadType) { loadType = true; console.log('歌曲下载完毕'); that.callback(); } }, false); } } else { var img = new Image(); img.onload = function () { that.callback(); } img.src = src; } }); } // 加载完毕回调 callback() { var that = this; that.count = that.count + 1; console.log(that.count) that.per = Math.floor((that.count / that.imgLoadAll) * 100); that.changePer(that.per); if (that.per == 100) { console.log('加载完毕'); } } // 更改DOM百分比样式 changePer(per) { $(".perc_txt").html(per + "%"); } }
