Dynamicly load hires image based on window width

hisrc

# hisrc: load low src image by default and on defined breakpoint load hires image
# html markup: <img data-breakpoint="450" data-hisrc="large-image.jpg" src="default-image.jpg" alt=" ">
# data-breakpoint="450" is not needed, 450 is default

hisrc = () ->
	window_width = $(window).width()
	$('[data-hisrc]').each () ->
		
		$(this).attr('data-breakpoint', '450') if not $(this).attr('data-breakpoint')
		$(this).attr('data-losrc', $(this).attr('src') ) if not $(this).attr('data-losrc')
		
		current_src = $(this).attr 'src'
		hires_src   = $(this).attr 'data-hisrc'
		lores_src   = $(this).attr 'data-losrc'
		breakpoint  = $(this).attr 'data-breakpoint'

		if window_width > breakpoint and current_src != hires_src
			$(this).attr('src',hires_src)
		if window_width < breakpoint and current_src != lores_src
			$(this).attr('src',lores_src)

$(window).load () ->
	hisrc()

$(window).resize () ->
	hisrc()