https://sankafujinka-minami-cl.jp/file/imgsContainer.js

1(function($, window, document, undefined) {
2
3ImgsContainer = function( opts ) {
4	return (this instanceof ImgsContainer)
5		? this.init( opts )
6		: new ImgsContainer( opts );
7}
8
9ImgsContainer.addStatClass = { loading:'loading', loaded:'loaded' };
10ImgsContainer.srcAttrName = 'src';
11
12ImgsContainer.prototype.destroy = function() {
13	var self = this;
14};
15
16ImgsContainer.prototype.init = function( opts ) {
17	var self = this;
18
19	opts = opts || {};
20	self.$containerObj = opts.$containerObj;
21	self.srcAttrName = opts.srcAttrName || ImgsContainer.srcAttrName;
22	self.$containerImgs = self.$containerObj.find('img['+self.srcAttrName+']');
23	self.imgs = [];
24	self.imgsCount = self.$containerImgs.length;
25	self.loadedCount = 0;
26	self.loadedCallback = opts.loadedCallback;
27	if( opts.autoLoad ) {
28		self.load();
29	}
30};
31
32ImgsContainer.prototype.load = function() {
33	var self = this;
34	self.$containerObj.addClass( ImgsContainer.addStatClass.loading );
35	self.$containerImgs.each(function(index,element) {
36		var img = new Image();
37		self.imgs[index] = img;
38		self.imgs[index].onload = (function (index) {
39            return function () {
40
41				self.loadedCount += 1;
42				self.$containerImgs.eq( index ).attr( { 'src': self.imgs[index].src } );
43				if( self.loadedCount >= self.imgsCount  ) {
44					self.loaded();
45				}
46
47            };
48        })( index );
49		self.imgs[index].src = $(this).attr( self.srcAttrName );
50	});
51}
52
53ImgsContainer.prototype.loaded = function() {
54	var self = this;
55	self.$containerObj.removeClass( ImgsContainer.addStatClass.loading );
56	self.$containerObj.addClass( ImgsContainer.addStatClass.loaded );
57
58	if( $.isFunction( self.loadedCallback ) ) {
59		self.loadedCallback( self );
60	}
61};
62
63
64})(jQuery, window, window.document);