मेरे पास फ्रंट-एंड पर वेबिक्स यूआई के साथ एक मूल नोड जेएस एक्सप्रेस वेब एप्लिकेशन है।

बहुत सारे डेटा के साथ बहुत सारे घटक/तालिकाएँ हैं जिन्हें इन तालिकाओं में भरने की आवश्यकता है।

मेरे पास कुछ पृष्ठभूमि-छवियों के साथ एक लोडिंग स्क्रीन है जो सभी डेटा की लोडिंग पूरी होने तक हर 3 सेकेंड में पृष्ठभूमि छवि यूआरएल बदल रही है।

लोडिंग स्क्रीन के साथ समस्या यह है कि छवियां पहली चीज नहीं हैं जो ब्राउज़र द्वारा डाउनलोड की जाती हैं। छवियों के डाउनलोड होने से पहले ही टेबल कभी-कभी पॉप्युलेट हो जाते हैं और यह लोडिंग स्क्रीन रखने के पूरे उद्देश्य को हरा देता है।

मैं सोच रहा था कि ब्राउज़र में एप्लिकेशन खोले जाने पर मैं इन छवियों को पहली बार लोड कर सकता हूं या नहीं।

यहाँ एचटीएमएल कोड है:

<body>
        <div id="container-id" class="container">
            <div id="text-id" class="text">Loading...</div>
        </div>
</body>

यहाँ सीएसएस है:

@-webkit-keyframes changeBg
    {
        0%  {background-image: url("/resources/images/one.jpg");}
        25%   {background-image: url("/resources/images/two.jpg");}
        50%   {background-image: url("/resources/images/three.jpg");}
        75%  {background-image: url("/resources/images/four.jpg");}
        100%  {background-image: url("/resources/images/five.jpg");}
    }
    .container {
      height: 100%;
      width: 100%;
      background-image: url("/resources/images/one.jpg");
      -webkit-animation: changeBg 15s infinite;
      background-size: 100%;
      background-position: center;
    }

इसी तरह के प्रश्न के आधार पर: किसी और चीज से पहले विशिष्ट छवि लोड करें

मैंने जावास्क्रिप्ट का उपयोग करके छवियों को इंडेक्स पेज में पहली कुछ पंक्तियों के रूप में लोड करने का प्रयास किया:

<head>
        <script type="text/javascript">
            (new Image()).src= window.location.href + "resources/images/one.jpg";
            (new Image()).src= window.location.href + "resources/images/two.jpg";
            (new Image()).src= window.location.href + "resources/images/three.jpg";
            (new Image()).src= window.location.href + "resources/images/four.jpg";
            (new Image()).src= window.location.href + "resources/images/five.jpg";
        </script>
        <link rel="stylesheet" href="webix.css" type="text/css" media="screen" charset="utf-8" />
        <link rel="stylesheet" href="app.css" type="text/css" media="screen" charset="utf-8" />
</head>

लेकिन फिर भी, अन्य अनुरोधों को छवियों से पहले परोसा जाता है।

1
Nick Div 6 जुलाई 2020, 09:44

2 जवाब

सबसे बढ़िया उत्तर

वास्तव में स्क्रिप्ट्स को head में रखे जाने के क्रम में लोड किया जाता है। ब्राउज़र ईवेंट के उठने की प्रतीक्षा नहीं करेगा, फिर अन्य स्क्रिप्ट लोड करने के लिए जाएं (इसका कोई मतलब नहीं है)। तो आपकी स्क्रिप्ट पूरी तरह से लोड हो गई है लेकिन यह event है क्योंकि इमेज लोडिंग को ऊपर नहीं उठाया जाता है।

इसलिए हमें await तक सभी इमेज लोड होने तक then स्क्रिप्ट लोड करनी होंगी।

यहाँ कोड है:

<script type="text/javascript">
    function loadImageAsync(url) {
        return new Promise((resolve) => {
            let img = new Image();
            img.src = url;
            img.addEventListener('load', e => resolve(img));
        });
    };

    async function loadImages() {
        var im1 = loadImageAsync("imageUrlOne");
        var im2 = loadImageAsync("imageUrlTwo");

        var image1 = await im1;
        console.log(`image one loaded..., url:${image1.src}`)
        var image2 = await im2
        console.log(`image two loaded..., url:${image2.src}`)
    }

    function loadScript(url) {
        var script = document.createElement("script")
        script.type = "text/javascript";
        script.src = url;
        document.getElementsByTagName("head")[0].appendChild(script);
    }

    loadImages().then(() => {
        console.log("loading scripts...");
        loadScript("script 1 url here");
        loadScript("script 2 url here");
    });
</script>
1
Hassan Monjezi 6 जुलाई 2020, 13:26

आप ऐसी चीजों के लिए रिएक्ट जेएस का उपयोग कर सकते हैं, रिएक्टज इस तरह की बहुत सी चीजों को आसान बनाता है। प्रतिक्रिया के बारे में अधिक जानने के लिए।

यहां जाएं: https://reactjs.org/

import React from "react";

class ImageWithStatusText extends React.Component {
  constructor(props) {
    super(props);
    this.state = { imageStatus: "loading" };
  }

  handleImageLoaded() {
    this.setState({ imageStatus: "loaded" });
  }

  handleImageErrored() {
    this.setState({ imageStatus: "failed to load" });
  }

  render() {
    return (
      <div>
        <img
          src={this.props.imageUrl}
          onLoad={this.handleImageLoaded.bind(this)}
          onError={this.handleImageErrored.bind(this)}
        />
        {this.state.imageStatus}
      </div>
    );
  }
}
export default ImageWithStatusText;
0
Prabesh Gouli 6 जुलाई 2020, 10:48