jQuery デバイス　判別

JavaScript jQuery design

<p><img src="img/p_sp.jp" class="switch"></p>

<styel>

.switch{visibility: hidden; }

</style>

 

var setImg = $('.switch') ,
namePc = '_pc' , // PC用
nameSp = '_sp' , // スマホ用
switchwidth = 767; // 判別

 

setImg.each(function(){
var selfImg = $(this);

function switchImg() {
if(window.innerWidth > switchwidth) {
selfImg.attr('src', selfImg.attr('src').
replace(nameSp, namePc));
} else {
selfImg.attr('src',selfImg.attr('src').
replace(namePc, nameSp));
}
}

$(window).on('load orientationchange resize', function(){
switchImg();
setTimeout(function(){
setImg.css({visibility: 'visible'});
}, 300);
});

});