فروشگاه فیگووب

ساخت لودینگ برای عکس ها در وردپرس

اگر می خواهید برای عکس های سایت لودینگ قرار دهید خوب جایی امدید. در این مقاله قست داریم آموزش ساخت لودینگ برای عکس ها سایت بسازیم ببینم که چه جوری این روش انجام میگردد. سایت های شبیه یوتوب و… برای لود شدن عکس ها لودینگ قرار دادهاند ما هم گفتیم یک آموزش بزاریم که شما هم بتونید در سایت خود لودینگ برای تصاویر استفاده کنید.

آموزش ساخت لودینگ برای عکس ها؟

قبل از هر کاری از قالب وردپرسی خود بکاپ بگیرید تا بتوانید تغییرات را برگردانید.

اول از همه کار ها یک فایل js بسازید و کد های پایین را در ان قرار دهید . مثلا فایلی که ما ساختیم load-img.js است.

jQuery(document).ready(function(){
    jQuery('img').parent().addClass('image-load');
    jQuery('.image-load').append('<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="24px" height="30px" viewBox="0 0 24 30" style="enable-background:new 0 0 50 50;" xml:space="preserve"><rect x="0" y="8.61111" width="4" height="12.7778" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="8" y="8.88889" width="4" height="12.2222" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.15s" dur="0.6s" repeatCount="indefinite"></animate></rect><rect x="16" y="6.38889" width="4" height="17.2222" opacity="0.2"><animate attributeName="opacity" attributeType="XML" values="0.2; 1; .2" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="height" attributeType="XML" values="10; 20; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate><animate attributeName="y" attributeType="XML" values="10; 5; 10" begin="0.3s" dur="0.6s" repeatCount="indefinite"></animate></rect></svg>');
    

    jQuery('.image-load img').ready(function(){
        setTimeout(function(){ jQuery('.image-load').addClass('loaded');jQuery('.image-load svg').remove(); }, 2000);
    });
});

مقدار 2000 به معنای 2 ثانیه می باشد و کد با 2 ثانیه تاخیر اجرا خواهد شد.

بعد از قرار دادن کد ها داخل فایل js باید فایل را به سایت معرفی کنیم و وردپرس ان را برای لود قرار دهد.

برای فراخانی فایل js کد زیر را در اخر فایل functions.php قالب سایت بزارید.

function theme_styles() {
    // wp_enqueue_script('jquery');
    // توجه داشته باشید که کتابخانه جی کوئری در سایت شما فراخوان شده باشد. در غیر این صورت کد بالا را از حالت کامنت درآورید
    wp_enqueue_script( 'loadimage', get_template_directory_uri() . '/assets/js/load-img.js', '0.1', true );
    // با استفاده از کد بالا فایل JS را فراخوان میکنیم. در آدرس دهی دقت نمایید.
}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

دقت کنید که ادرس فراخانی فایل js را به درستی وارد کنید ما به شکل پیش فرض فایل را داخل پوشه assets/js قرار دادیم .

بعد از مراحل بالا کد های زیر را داخل فایل style.css قرار دهید. فرقی نمی کند کجا قرار دهید فقط فراخوانی شود برای همنی اینو گفتم کهبرای ما فایل style.css است شاید برای شما فایلی دیگر باشید این بستگی به قالب فعال در وردپرس دارد.

.image-load {
	position: relative;
	overflow: hidden;
	display: block;
}
.image-load:before {
	content: "";
	width: 100%;
	height: 100%;
	position: absolute;
	display: block;
	left: 0;
	top: 0;
	background: #ccc;
}
.loaded:before {
	content: none;
}
.image-load svg {
	position: absolute;
	top: 0;
	right: 0;
	width: 70px;
	height: 70px;
	left: 0;
	bottom: 0;
	margin: auto;
}
.image-load svg rect {
	fill:#333;
}

خوب شما موفق شدید که لودینگ رو برای عکس ها در سایت قرار دهید و می توانید مقاله را برای دوستان ارسال کنید. موفق باشید.

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام فیگووب عضو شوید.

نظر شما در این‌باره چیست؟

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *