로딩이 끝난 후에 만 이미지를 퇴색시킵니다
-
16-12-2019 - |
문제
나는 무작위로로드되고 100KB가 넘는 페이지에서 몇 가지 이미지를 가질 수 있으며 점진적으로 로딩하는 것이 아니라 완전히로드 된 다음 퇴색 할 수 있습니까?
My JS는 다음과 같습니다 ...
(function($){
$.randomImage = {
defaults: {
//you can change these defaults to your own preferences.
path: '_images/', //change this to the path of your images
myImages: ['hero_eagle.jpg', 'hero_giraffe.jpg', 'hero_owl.jpg', 'hero_rabbit.jpg']
}
}
$.fn.extend({
randomImage:function(config) {
var config = $.extend({}, $.randomImage.defaults, config);
return this.each(function() {
var imageNames = config.myImages;
//get size of array, randomize a number from this
// use this number as the array index
var imageNamesSize = imageNames.length;
var lotteryNumber = Math.floor(Math.random()*imageNamesSize);
var winnerImage = imageNames[lotteryNumber];
var fullPath = config.path + winnerImage;
//put this image into DOM at class of randomImage
// alt tag will be image filename.
$(this).attr( { src: fullPath });
});
}
});
})(jQuery);
. 해결책
스타일 시트에서 display:none
로 이미지를 설정하고 src를 설정하는 스크립트의 비트를 수정할 수 있어야합니다.
$(this).attr( { src: fullPath }).load(function() {
$(this).fadeIn()
});
. 다른 팁
CSS를 사용하여 숨겨진 이미지로 시작합니다.그런 다음 다음을 사용하십시오.
$(document).ready(function() {
// Code goes here.
});
.
및 거기에 페이드 인을 실행하십시오.
jQuery를 사용하여 이미지를 미리로드하는 것에 대해 설명하는 또 다른 질문은 jQuery로 이미지를 미리로드
상위 응답에서 인용 :
function preload(arrayOfImages) {
$(arrayOfImages).each(function(){
$('<img/>')[0].src = this;
// Alternatively you could use:
// (new Image()).src = this;
});
}
// Usage:
preload([
'img/imageName.jpg',
'img/anotherOne.jpg',
'img/blahblahblah.jpg'
]);
. 모든 이미지가 페이딩하기 전에 모든 이미지를 사전로드하고 사용자에게로드 메시지를 표시하려면 다음과 같이 사용할 수 있습니다.
var gotime = imgArray.length;
$(".maxCount").text(gotime);
var imgCounter = 0;
$.each(imgArray, function(){
$(new Image()).load(function(){
imgCounter++;
$(".presentCount").text(imgCounter);
if (--gotime < 1) {
$("#content").fadeIn();
}
}).attr('src', this);
});
. 제휴하지 않습니다 StackOverflow