فية عندي مشكلة في سكربت عشان ضعف الإنترنت كيف بدي اخلية بس يفتح صفحة طول ما هيا بتحمل يستني بس تخلص تحميل يكمل باقي الخطوات
لدي مشكلة
أفترض من كلامك أنك تتحدث عن صفحة ويب. بالتالي لأنجاز ماتريد تحتاج التلاعب بالمحتوى من خلال جافاسكربت وبمساعدة خصائص css. هنا أضع مثالاً عاماً يمكنك إسقاطه على حالتك بتصرف منك. يتضمن المثال تحميل مجموعة من الصور في صفحة يظهر فيها للمستخدم عبارة الإنتظار لحين انتهاء تحميل الصور حتى تختفي العبارة وتظهر الصور التي تم تحميلها من خادم خارجي.
<html>
<head>
<style>
/* عند فتح الصفحة من قبل المستخدم تكون عبارة جاري التحميل ظاهرة */
.loading{
display: block;
}
.container{
display: flex;
flex-direction: row;
justify-content: flex-start;
width:100%;
flex-wrap: wrap;
display: none;
/* عند فتح الصفحة من قبل المستخدم تكون حاوية الصور مخفية */
}
img {
background: #F1F1FA;
width: 400px;
height: 300px;
display: block;
margin: 10px auto;
border: 0;
}
/* الصور لن تظهر حتى تكون حاويتها ظاهرة */
</style>
</head>
<body dir="ltr">
<div class="loading">جاري التحميل...</div>
<!-- عنصر يحتوي رسالة للمستخدم جاري التحميل -->
<div class="container" >
<!-- حاوية الصور -->
<img class="lazy" src="https://ik.imagekit.io/demo/img/image1.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image2.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image3.jpg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image4.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image5.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image6.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image7.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image8.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image9.jpeg?tr=w-400,h-300" />
<img class="lazy" src="https://ik.imagekit.io/demo/img/image10.jpeg?tr=w-400,h-300" />
</div>
<script>
window.addEventListener('load', (event) => { // ننتظر لحين تحميل كامل الصور
let loader= document.querySelector(".loading") // نخفي العنصر المسؤول عن رسالة التحميل
loader.style.display="none"
let container= document.querySelector(".container") // نظهر حاوية الصور
container.style.display="flex"
});
</script>
</body>
</html>
التعليقات